Il est de notoriété publique que IE ne gère pas correctement la transparence des images PNG. Il est de la même notoriété (a priori) qu'il existe une solution (qui n'en est pas vraiment une) à ce problème: le filtre AlphaImageLoader. Pour ceux qui ne connaissent pas, cela consiste à charger les PNG via un filtre (youpi). Le problème est que ce filtre ne s'applique pas à un élément img, mais qu'il définit un background, donc à utiliser sur (par exemple) un span. On peut trouver sur le net des choses comme ça:

function correctPNG() {

	for (var i = 0; i < document.images.length; i++) {

		var img		= document.images[i];
		var imgName	= img.src.toUpperCase();
		
		if (imgName.substring(imgName.length - 3, imgName.length) == 'PNG') {
		
			css		= new Array();

			css.push("width: " + img.width + "px;");
			css.push("height: " + img.height + "px;");
			css.push("filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', sizingMethod='image');");
			
			if (img.parentElement.href) {
			
				css.push("cursor: pointer;");
			
			}
			
			cssText			= css.join(' ');
			outerHTML		= '<span id="' + img.id + '" class="' + img.style.className + '" style="' + cssText + '"></span>';
			
			img.outerHTML	= outerHTML;
			
			i--;
		
		}
	
	}

}

window.attachEvent("onload", correctPNG);

Cela remplace les éléments img contenant des PNG par des span. Bon, ça marche à peu près, mais c'est pas encore ça parceque:

  • ça casse le javascript (par exemple si on a un onmouseover sur l'image, on l'oublie)
  • là c'est vicieux. Si on a un élément (disons un div), auquel on applique un background en utilisant le filtre AlphaImageLoader, et que dans ce div on a un lien-image (cad: <a><img /></a>), et bien le lien ne fonctionne plus. J'ai mis une bonne journée à m'en rendre compte, et laisser moi vous dire que ça fout les boulles.

Du coup j'ai converti quelques PNG en GIF, et je me retrouve avec deux formats d'images diiférents, ce que je trouve assez gruïk.