Bug fix de la transparence des png sous ie 6

Soyez le premier à donner votre avis sur cette source.

Vue 14 070 fois - Téléchargée 538 fois

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 ! ;)

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
mardi 31 janvier 2006
Statut
Membre
Dernière intervention
9 décembre 2009

J'ai oublié la note. Un 10/10 évidemment.

Par contre DEMETRIAX tu es hors-sujet. Si tu veux apprendre à créer des liens, trouves un topic sur les bases du HTML/
Messages postés
2
Date d'inscription
mardi 31 janvier 2006
Statut
Membre
Dernière intervention
9 décembre 2009

Merci beaucoup ! Ce script est vraiment LA solution qu'il me fallait pour gérer mon opacité en background-image via un png !
Messages postés
1980
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
24 septembre 2012
5
Bonjour, je n'ai pas bien compris la question et s'il y a un rapport avec la source ?
Messages postés
1
Date d'inscription
jeudi 24 janvier 2008
Statut
Membre
Dernière intervention
3 avril 2009

bonjour,
j'ai un souci lorsque je veux intégrer un href, IE ne le prend pas en compte...
Vous avez une idée ? Merci
Messages postés
436
Date d'inscription
mercredi 26 septembre 2007
Statut
Membre
Dernière intervention
2 juillet 2014
1
j'ai oublié la note, cela mérite un petit 9/10 ;) (dommage qu'il n'y a pas 9,5) lol
Afficher les 15 commentaires

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.