Le problème

Les PNG transparents permettent de faire de très beaux effets sur les pages web.
Tous les navigateurs le supportent (Firefox, Opera, Konqueror, Safari, Camino...)... sauf Internet Explorer 5.5 et 6 !
(Internet Explorer 7, lui, supporte correctement les PNG transparents).

C'est donc particulièrement pénible, puisque cela vous oblige:

• Soit à ne pas utiliser de PNG transparents.
• Soit à gérer 2 versions de la page (pour IE 5.5/6, et pour tous les autres).

La solution

Voici un bout de Javascript (2 ko) qui permet à IE 5.5 et IE 6 de gérer correctement les PNG transparents.
(Oui oui, vous avez bien lu.)

Le gros du travail consiste à mettre ce bout de Javascript sur votre site: pngfis.js

puis à ajouter dans vos pages:

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

C'est tout !

Attention: Il est nécessaire d'indiquer la taille des PNG transparents (width et height) dans chaque balise <img>.

Ceci ne causera pas la moindre perturbation dans les autres navigateurs et ne cassera pas la validation W3C. Seuls IE 5.5 et IE 6 utiliseront ce bout de code automatiquement.

Note: Il n'y a aucune solution pour les version de IE antérieures à la 5.5.

Comment ça marche ?

Le bout de javascript n'est exécuté que par IE 5.5 et IE 6.
Il fait appel à DirectX pour charger et afficher les PNG.