透明PNG在IE6下的官方解决方案
21 Oct 2007
做Web开发的朋友一定都知道PNG是一个相当不错的图片格式,但是这个好的格式却在IE6时代造成了麻烦,IE6会使透明的PNG的透明部分出现#DBEAED的色彩。透明不了。使得在FF下开发表现很好的界面换成IE浏览就惨不忍睹,又逼着换成GIF,而GIF的假透明在变换背景时造成毛边现象。
刚去了www.gowindowslive.com去生成一个WLM的联系方式图标,结果发现的官方的解决方案。;)
核心函数贴出来供分析
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | /* Correctly handle PNG transparency in Win IE 5.5 & 6. Copyright 2007 Ignia, LLC Based in part on code from from http://homepage.ntlworld.com/bobosola. Use in with DEFER keyword wrapped in conditional comments: <script type="text/javascript" defer="true" src="pngfix.js"></script> */ function fixPng() { var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5 && version < 7.0) && (document.body.filters)) { for(var i=0; i<document.images.length;></document.images.length;> var img = document.images[i]; var imgName = img.src.toUpperCase(); if (imgName.indexOf(".PNG") > 0) { var width = img.width; var height = img.height; var sizingMethod = (img.className.toLowerCase().indexOf("scale") >= 0)? "scale" : "image"; img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')"; img.src="images/blank.gif" mce_src="images/blank.gif"; img.width = width; img.height = height; } } } } fixPng(); |
14 Responses for "透明PNG在IE6下的官方解决方案"
-

-

背景一样适用
-

png能显示的颜色要比gif丰富得多,这个办法太有效了。
实现了。感谢楼主!!! -

這個方法超棒的~~
不過背景怎麼試都不成功耶!!?
請問大師該怎麼樣才會適用呢? -

我想说这个方法,在ie6依然不行,请问是怎样一回事
-

我暂时用的方法.直接在CSS中重写下IMG
IMG {
azimuth:expression(
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 = “gifmask.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);
} -

好方法,谢谢!
-

此方法不妥!
-

方法不妥谁都会说。你既然说了为什么不拿出来一个好的解决方案呢?不要光说大话,要有实际行动才行,不然你只能让人讨厌!
-
-

好使!!!
-

很奇怪的是我在本地测试没问题 但是上传到服务器上就出问题了。

在有些“standalone IE6”下面,似乎不好用。
而且,对于定义在CSS里面的背景PNG,似乎也不能这么处理吧?