Back CSS

CSS PNG Hack for IE6

WRITTEN BY ON 17 Mar 2011
14,298 VIEWS • SHARES
1 comment

A quick and non javascript PNG hack. Just put this in a ie6.css file, and apply the class to any div or img that using PNG images with transparency. It doesn't support background repeat.

CSS

Apply this hack to any div or img that using PNG images with transparency.

.png {
		position:relative;
		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 = "images/transparent.gif"):(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.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

1 comment
Prodyot 13 years ago
Great non-script hack for PNG issues with IE6.
A very helpful hack.
Thanks.
Reply