Problème de gestion des images PNG via Internet Explorer autres que la gestion de la couche alpha.

Attention : une mise à jour de cet article a était publié, le 19 Décembre 2007, avec l’explication complète du bug.

I.Le constat

Pendant la mise à jour de mon site j’ai changé le logo de mon site et comme, je suis pas très futé; je suis allé sur le net pour trouver de l’inspiration et des tutoriaux pour créer mon nouveau logo. Au momment de sauver mon nouveau logo, Photoshop m’a proposé 3 types de fichier : GIF ,JPEG et PNG. Suivant les recommendations sur le type de fichier à choisir j’ai sauvé mon logo en PNG. Le résultat fut alors assez étrange dans le navigateur que tous le monde adore, Internet Explorer et ce, quelque soit la version.

Internet Explorer

Dans les autres navigateurs

la couleur de l’arrière plan diffère légèrement de la couleur de fond du logo Dans les autres navigateur, on observe aucune différence entre arrière plan et la couleur de fond du logo

II.L’explication

Après moultes investigations sur le net. Je retombais toujours sur le même problème de transparence de PNG sous IE6. Mais bon là, le problème est le même sous IE7 et ce bug est censé être résolu pour les PNG… , de plus il n’y a pas de transparence dans mon logo!!!Une piste serait de dire que Trident a encore des problème avec le PNG, bug qui ne se limite pas au traitement de la transparence.. à moins que cela soit liés mais je vois pas comment. Bref en attendant, je n’ai pas d’explication solide et comme je suis pas graphiste, je ne peux que constater.

III.La solution

En attendant une explication à ce phénomène, j’utilise une expression conditionnel sous IE pour ajuster la couleur de mon arrière plan à la nouvelle couleur de fond de mon image. En espérant que IE 8 règle ce problème une bonne fois pour toute.

<!--[if IE lt 8]><style type="text/css" media="screen">#header { background-color:#FFE295; }</style><![endif]-->

Le côté intéressant de cette histoire c’est que j’ai trouvé une nouvelle utilisation pour l’IE Developper Toolbar, qui m’aide maintenant à déterminer la couleur exact de l’arrière plan de mon image sous IE et ensuite à ajuster la couleur de fond de mon entête comme indiqué ci-dessus.