Although IE6 has existed for many years, there are so many users who use this browser to surf the Internet. That why we (the developers) have to support them, don’t we?
In IE6 there are so many bugs that causes our HTML and CSS design breaks down into pieces. One of them is transparent PNG images can not be transparent! That’s sad!
However, there also has many solutions and tricky ways to overcome that. I’ve found this article
http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/
is very interesting. Let me summarize the steps:
- Put in your CSS the following code:
** html img,* html .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 = “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));}
