Tous les développeurs web le savent: les images PNG ne font pas bon ménage avec Internet Explorer. Les images PNG sont dotées d’un canal alpha, c’est à dire qu’elles gèrent la transparence. Seul hic, et je ne saurais vous expliquer cela, Internet Explorer transforme la partie transparente du PNG en gris… Voyez par vous même:

png fix

Pour éviter ce problème, il existe 2 solutions: soit transformer ce gris en blanc ou la couleur de l’arrière plan, soit utiliser un PNG Fix. Bien évidemment si vous utilisez des images PNG pour votre site web, c’est justement parce que ce conteneur gère la transparence, on va donc opter pour un PNG Fix!

Mais seulement voilà, parfois on se perd un peu dans tous ces PNG Fix! Certains marchent, d’autres pas toujours… Voilà donc le PNG Fix que j’utilise =)

  • IE PNG Fix v1.0 / 2.0 Alpha 3

C’est celui que j’ai utilisé pour mon CV en ligne (http://www.ludovic-lecerf.com), et il marche impeccablement bien =)

How did it work?

Et bien c’est simple, on télécharge le script « iepngfix.htc » disponible ici sans oublier l’image vide de 1px « blank.gif » disponible dans le package zip, puis on ajoute une propriété CSS « behavior » propre à Internet Explorer, qui n’aura donc aucune action sur les autres navigateurs comme Mozilla ou Safari.
Pour les codeurs les plus propres, sachez que behavior n’est pas valide W3C… Mais là vous avez une bonne excuse.

Attention: Si vous voulez utiliser le PNG Fix sur un background utilisant les propriétés position et repeat, téléchargez la version 2.0 Alpha 3 !!

Vous pouvez soit appliquer un behavior sur toutes les images (les background ne sont pas compris):

[sourcecode language='css']
img {
behavior: url(iepngfix.php);
}
[/sourcecode]

ou alors sur un ou plusieurs background en particulier:

[sourcecode language='css']
.haut {
height: 24px;
behavior: url(iepngfix.php);
background: url(haut.png) no-repeat;
}

.bas {
height: 47px;
behavior: url(iepngfix.php);
background: url(bas.png) no-repeat;
}

a.bouton {
float:left;
width:181px;
height:38px;
display: block;
background: url(bouton_off.jpg) 0 -55px;
}
[/sourcecode]

Pour le behavior faites attention de bien renseigner l’url relative au chemin du style.css.

Je vous ai donc parlé de la méthode que j’utilisais, mais il en existe d’autres que je n’ai pas encore testées. Comme par exemple le tout nouveau PNG Fix DD_belatedPNG qui à l’air de marcher tout aussi bien.

Pour celui-ci nous n’avons pas besoin de modifier le style CSS, il suffit d’appeler le script entre les balises <head>:

[sourcecode language='html']


[/sourcecode]

Si vous avez des questions ou si vous utilisez une méthode meilleure que la mienne je suis preneur =)