Problèmes IE6 avec les PNG transparents

Question

Je me suis habitué à l'idée que, si je souhaite / ai besoin d'utiliser des fichiers PNG alpha-trans en mode multi-navigateurs, j'utilise une image d'arrière-plan sur un div, puis, en CSS pour IE6 uniquement, marque le fond en tant que " none " et inclure le "filtre" approprié argument.

Y a-t-il un autre moyen? Une meilleure façon? Existe-t-il un moyen de le faire avec la balise img et non avec des images d'arrière-plan?

Answer 1

En bout de ligne, si vous voulez une transparence alpha dans un fichier PNG et que vous voulez que cela fonctionne dans IE6, vous devez appliquer le filtre AlphaImageLoader.

Maintenant, il existe de nombreuses façons de le faire: hacks spécifiques au navigateur, commentaires conditionnels, itération d'élément Javascript / JQuery / JLibraryOfChoice, serveur CSS côté serveur via UserAgent-sniffing ...

Mais tout se résume à l'application du filtre et à la suppression de l'arrière-plan.

Answer 2

Voici une solution spécifique qui me plait, en utilisant Javascript (jQuery):

http://jquery.andreaseberhard.de/pngFix/

Il est facile d’ajouter à un site existant, gère toutes sortes d’images (boutons de formulaire, arrière-plans, balises IMG classiques, etc.) et laisse votre code CSS propre et net.

Answer 3

C'est probablement le "meilleur" façon. Mais gardez à l’esprit que ce n’est pas seulement l’alpha-trans que IE6 n’implémente pas correctement en ce qui concerne les fichiers PNG; L'espace colorimétrique est corrompu car IE n'implémentait pas correctement le gamma. Les fichiers PNG indiquent donc souvent "plus sombre". qu'ils devraient.
Une alternative " solution " que nous avons implémenté dans un projet récent consistait à marquer chaque image png avec un "toGif". class, dans le CSS dont le comportement personnalisé est appelé .htc, qui modifie l'extension .png en .gif si le navigateur détecté est celui que nous avons signalé comme étant un problème. Nous incluons simplement une version GIF de chaque fichier PNG dans le même chemin, et si le navigateur s'avère ne pas gérer correctement les fichiers PNG, il est remplacé par une version GIF de l'image. Nous sacrifions donc l'alpha blending au profit d'une transparence totale et d'une précision des couleurs garanties, et ne le faisons que lorsque nous savons qu'il ne semblera probablement pas être correct tel quel.
Ce n'est peut-être pas une solution idéale, mais je suppose que c'est la nature du navigateur croisé.
Edit: en fait, maintenant que je regarde le projet en question, nous avons utilisé un comportement .htc pour une classe img appelée "alpha". ainsi que jette le filtre correct sur l'image automatiquement. Donc, vous détectez le navigateur en utilisant javascript au lieu d'un hack CSS pur pour IE6, il est donc peut-être un peu plus élégant ... mais c'est fondamentalement la même chose.
Pour une introduction à la rédaction des comportements DHTML, essayez ce lien .

Answer 4

Le chargeur d'images est le seul correctif disponible pour IE6. Notez que son support PNG est très rudimentaire (avec IE7 aussi) et qu'il ne peut pas gérer correctement les arrière-plans transparents en boucle. J'ai appris cela à la dure en essayant de concevoir un site Web avec un conteneur transparent. Fonctionne parfaitement dans Firefox, bien sûr.

Le correctif devrait être correct pour les petites zones d’arrière-plan et les graphiques de premier plan transparents, mais encore une fois, je vous déconseille de concevoir un site Web utilisant beaucoup de transparence avec Internet Explorer.

En fin de compte, ma solution consistait à afficher une couleur plate pour IE, tout en conservant la transparence pour les autres navigateurs. Heureusement, je n'ai pas trop mal gâché le design à la fin.

Answer 5

Une autre solution consiste à utiliser 2 images distinctes, par exemple un fichier GIF et un fichier PNG transparent, et à cibler votre code CSS en conséquence:

/* for IE 6 */
#banner {
    background:url(../images/banner.gif);
}

/* for other browsers */
html > #banner {
    background:url(../images/banner.png);
}

IE 6 ne comprenant pas les sélecteurs enfants CSS, il ignorera donc la règle, alors que les navigateurs qui le comprendront vous fourniront un joli fichier PNG transparent.

Le seul inconvénient est que vous devez avoir deux images distinctes et que le design peut ne pas ressembler exactement au même navigateur multi-navigateurs, mais tant qu'il ne semble pas cassé, tout devrait bien se passer.

Answer 6

Voici 2 options qui n'utilisent pas le filtre AlphaImageLoader.

• DD_belatedPNG de Drew Diller : utilise une solution basée sur VML plutôt que le filtre AlphaImageLoader .
• PNGPong : une solution Flash

Pour moi, si envoyer un fichier .gif avec cache à IE6 n'est pas faisable, j'utilise Fireworks pour ajouter une palette compatible IE6 au fichier .PNG .

Answer 7

La solution habituelle pour les éléments img consiste à changer le code source pour qu'il pointe vers un GIF transparent de 1x1 pixel, puis à utiliser le même filtre bidouille.