Parce que j'ai quelques compétences en matière de production de pages Web, j'ai entendu dire il y a longtemps que les fichiers PNG translucides auraient des problèmes d'affichage sous IE6, mais comme je n'ai jamais eu mon propre site Web, je n'en ai jamais vraiment rencontré.
J'ai commencé à créer mon propre site Web au début de cette année. J'ai utilisé une image png avec une partie transparente pour créer le LOGO du site Web. Je pensais qu'elle était assez ancienne et qu'il n'était pas nécessaire de considérer IE6. Un jour, alors que je revenais du travail et que j'ouvrais le backend de Google Analytics, j'ai découvert que les visites d'IE6 représentaient en réalité 40 % du total des visites. J'ai été choqué et j'ai rapidement téléchargé la version verte d'IE6 sur Internet pour tester mon site Web. Comme prévu, le LOGO était complètement opaque.
J'ai donc cherché des solutions en ligne toute la nuit. De manière générale, les méthodes en ligne sont relativement compliquées, notamment les filtres CSS, JS, le remplacement de GIF, etc. Mais j'ai toujours pensé que ce n'était pas assez beau. Finalement, après une nuit de recherche, j'ai trouvé une méthode qui ne nécessitait que 2 phrases de code js pour résoudre le problème en douceur. Partageons-le avec vous ensuite
Tout d’abord, téléchargez iepng.js depuis mon site Web
http: //www.***.com/templates/default/js/iepng.js
Si l'ID d'élément de votre site Web qui utilise un png semi-transparent comme arrière-plan est le logo, ajoutez ce qui suit entre
:| |
Enfin, laissez-moi vous expliquer, si vous utilisez un png transparent comme arrière-plan du div id foo, alors il doit être écrit comme suit :
| EvPNG.fix('#foo'); |
Si vous utilisez un png transparent comme arrière-plan d'une classe de barre div, alors il doit être écrit comme suit :
| EvPNG.fix('.bar"); |
La syntaxe est la même que celle du CSS, OK, j'espère continuer à échanger des compétences en matière de création de sites Web avec vous.
Cet article a été créé à l'origine par Wang Zai, le webmaster de Tianniu.com (www.hers99.com). Veuillez indiquer la source lors de la réimpression.