Hack, IE6, Image, Proprieté

Parmi tous les reproches que l’on peut faire à Internet Explorer 6 est ca non gestion de la transparence des images PNG.

Pour contourner ce problème l’une des solutions est de passé par un fichier contenant pour faire simple une sorte de code javascript et qui portant l’extension .htc (pour HTML Components).

Vous trouverez par la suite le lien pour télécharger ce fichier mais commençons par la mise en place de cette solution.

L’appel à ce fichier se fait via la propriété CSS behaviour comme ceci :

#element {behavior:url(mon_fichier_htc.htc)}

Voici comment je procède en ce qui concerne les images PNG (car ces fichiers htc peuvent servir à d’autres choses…).

Dans la partie head, je rajoute une feuille de style rien que pour Internet Explorer

<!--[if IE]><link href="styles/ie.css" media="all" rel="stylesheet" type="text/css" /><![endif]-->

Sur tous mes éléments étant ou contenant une image PNG, je rajoute la class png

<!-- une image png -->
<img src="images/mon_image.png" alt="Mon image PNG" />

<!-- un bloc ayant une image png en background -->
<div class="png"></png>

Et dans la feuille de style ie.css, je précise le chemin vers mon fichier htc :

.png {behavior:url(scripts/iepngfix.htc)}

Remarques :

• le chemin vers le fichier htc se fait non pas depuis votre fichier CSS mais depuis la page appelante,
• une image blank.gif est nécessaire (celle-ci est fourni dans avec le fichier iepngfix.htc). Le chemin vers celle-ci est à préciser dans le fichier iepngfix.htc

Il vous reste à télécharger le fichier htc

Lien :

• iepngfix chez twinhelix.com