Comme vous le savez certainement, la gestion de la transparence des images au format PNG n’est pas complète sous Internet Explorer 6, contrairement à d’autres navigateurs respectueux des standards comme Firefox ou Opera. En effet, on observe un fond gris à la place de la transparence voulue :

comparaison des rendus

Dans une page web, il y a deux façons d’afficher une image :

  • A l’aide de la balise <img>
  • Via une feuille de style CSS et la propriété background-image.

Les méthodes de contournements de l’affichage défectueux d’IE sont différentes selon l’origine de l’image :

Images provenant de balises <img>

Il existe des scripts JavaScript qui permettent d’obtenir un affichage correct de ces images. Vous pourrez trouver une solution sur ce site, ainsi que le script JavaScript. Ensuite, il faut appeler ce script dans vos pages seulement si le navigateur est IE, pour cela on utilise les commentaires conditionnels :

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

Le mot-clé defer permet de transformer les images avant de les afficher, ce qui permet d’éviter l’affichage de fond gris pendant le chargement de la page.

Images provenant de feuille de style CSS

La marche à suivre pour permettre l’affichage de PNG transparents par l’intermédiaire de CSS est plus fastidieuse puisqu’il faut cette fois ajouter deux propriétés pour chaque images. Si l’on veut par exemple assigner l’image image.png à un élément HTML, on utilise la propriété suivante :

background-image: url("image.png");

Pour obtenir le même rendu sous IE 6, il faut utiliser les propriétés suivantes :

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src=image.png');
background-image: none;

L’utilisation de ce hack CSS peut provoquer un problème sur les liens de la page que l’on résout avec la règle suivante :

a, input
{
position: relative;
z-index: 1;
}

Je vous conseille de réunir toutes les règles de corrections des problèmes liés à IE dans un même fichier CSS, appelé par exemple iefix.css, que l’on appellera seulement si le navigateur est IE, ce qui donne au final :

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<link rel="stylesheet" type="text/css" href="iefix.css"/>
<![endif]-->

Définir la couleur de fond d’un fichier PNG

Dans le cas où l’on ne veut pas (ou peut pas) utiliser de code JavaScript ou hack CSS, il existe un moyen de choisir la couleur de fond de l’image PNG à la place du fond gris visible par défaut sous IE. Il est en effet possible de choisir une couleur de fond lors de l’enregistrement du fichier. Cette manipulation n’est pas possible avec Photoshop (ou alors je l’ai loupé) mais disponible avec The GIMP.

Lors de l’enregistrement de l’image, choissiez une couleur d’arrière-plan, puis enregistrez l’image au format PNG. Lorsque la boite de dialogue enregistrer au format PNG s’affiche, cochez l’option enregistrer la couleur d’arrière-plan, comme le montre la capture suivante :

enregistrement d'une image PNG avec Gimp

L’image s’affichera avec un fond de la couleur choisie à la place du gris hideux par défaut.

Voila ! J’espère que ce petit récapitulatif vous sera utile !

Lien permanent