Bug fix de la transparence des png sous ie 6

Télécharger le projet
Commenter

Description

Un code très court en css/javascript pour régler la non-prise en charge de la transparence sous Internet Explorer 6. L'ensemble pèse environ 1ko.
Vous devez aussi indiquer la doctype suivante ou supérieure : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

A mon avis c'est mieux que du javascript pur car cela fonctionne également sur du contenu généré dynamiquement, sans rien avoir à faire. Et c'est plus simple et court que d'ajouter une propriété filter à chaque image ou div qui en a besoin.

Donc, pour toutes les balises images <IMG /> c'est réglé d'office. Pour le cas des images png utilisées en background css, il faut rajouter une classe "png" à vos div : <div class="maclassenormale png">. Attention, j'ai ajouté une ligne qui fait que les images png utilisées en background seront étirées pour s'étendre sur toute la div, sauf si la propriété no-repeat est appliquée à ce background. Il faudra l'enlever si cela ne vous convient pas. Si vous aviez un background png transparent auquel vous aviez donné une propriété position "bottom", "right" ou autre, je précise tout de suite que ça ne fonctionnera jamais correctement sous IE6.

Si certaines des vos div ont un background png qui ne s'affiche pas du tout, c'est certainement que vous devrez leur donner une hauteur de 1px (sous IE6 ça ne pose aucun problème, elles s'étireront quand même :)) Il faudra écrire : * html #element { height: 1px; }

Enfin, le * html est indispensable, c'est un vieux hack qui fait que uniquement IE6 et inférieur prendra en compte ces propriétés (sinon vous aurez des problèmes sous IE7). Je sais, les hacks c'est pas bien, mais celui-là ne posera probablement jamais de problème. Si vous voulez utiliser des commentaires conditionnels à la place, c'est votre choix et ça marche bien, moi je ne voulais pas faire un hit en plus :) Il y a aussi un gif d'un pixel carré transparent à mettre sur votre serveur au même endroit que la page.

Pour finir, ce code vient à l'origine de cette adresse :
http://komodomedia.com/blog/index.php/2007/11/05/css-png-image-fix-for-ie/
et j'y ai apporté deux ou trois améliorations. Lisez les explications et les commentaires pour plus d'infos, ils sont très instructifs.

Source / Exemple : 




  •  html img,

  •  html .png {

	behavior: expression(
			(this.runtimeStyle.behavior="none") && (this.pngSet ? this.pngSet = true : (
				this.nodeName == "IMG" ? (
					this.src.toLowerCase().indexOf('.png') > -1 ? (
						this.runtimeStyle.backgroundImage = "none",
						this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
						this.src = "transp.gif"
					) : 0
				) : (
					this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
					this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
					(this.currentStyle.backgroundRepeat != 'no-repeat') ? (
						this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')"
					) : 0,
					this.runtimeStyle.backgroundImage = "none"
				),this.pngSet=true
			)
		)
	);
}

Conclusion :


Passez à Firefox ! ;)
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (Evangun)