透明PNG在IE6下的官方解决方案

做Web开发的朋友一定都知道PNG是一个相当不错的图片格式，但是这个好的格式却在IE6时代造成了麻烦，IE6会使透明的PNG的透明部分出现#DBEAED的色彩。透明不了。使得在FF下开发表现很好的界面换成IE浏览就惨不忍睹，又逼着换成GIF，而GIF的假透明在变换背景时造成毛边现象。

刚去了www.gowindowslive.com去生成一个WLM的联系方式图标，结果发现的官方的解决方案。;)

™

核心函数贴出来供分析

/* 
Correctly handle PNG transparency in Win IE 5.5 &amp; 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:

function fixPng() { 
  var arVersion = navigator.appVersion.split("MSIE") 
  var version = parseFloat(arVersion[1])

if ((version &gt;= 5.5 &amp;&amp; version &lt; 7.0) &amp;&amp; (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") &gt; 0) { 
        var width = img.width; 
        var height = img.height; 
        var sizingMethod = (img.className.toLowerCase().indexOf("scale") &gt;= 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();

Correctly handle PNG transparency in Win IE 5.5 & 6.

Based in part on code from from http://homepage.ntlworld.com/bobosola.

Use in with DEFER keyword wrapped in conditional comments:

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

打包打包提供下载测试

This entry was posted on 星期日, 十月 21st, 2007 at 13:33 and is filled under: 代码人生, 分享我自己 Tags: IE, Microsoft

26 Responses to “透明PNG在IE6下的官方解决方案”

awflasher Says:
十一月 13th, 2007 at 22:16
在有些“standalone IE6”下面，似乎不好用。
而且，对于定义在CSS里面的背景PNG，似乎也不能这么处理吧？
cbm Says:
十一月 14th, 2007 at 00:35
这个解决方案有局限性，img标签可以处理一下。css的就不是同一层面了。
aaa Says:
三月 6th, 2008 at 15:27
背景一样适用
aileen Says:
三月 25th, 2008 at 09:51
png能显示的颜色要比gif丰富得多，这个办法太有效了。
实现了。感谢楼主！！！
笨小妹 Says:
七月 7th, 2008 at 18:53
這個方法超棒的~~
不過背景怎麼試都不成功耶!!?
請問大師該怎麼樣才會適用呢?
VF Says:
八月 13th, 2008 at 17:59
我想说这个方法，在ie6依然不行，请问是怎样一回事
cbm Says:
八月 19th, 2008 at 02:07
直接运行网页就可以看到效果。
Eric Says:
九月 17th, 2008 at 16:37
我暂时用的方法.直接在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);
}
壮壮 Says:
十二月 2nd, 2008 at 11:34
好方法，谢谢！
周裕波 Says:
十二月 3rd, 2008 at 15:37
此方法不妥！
Felix Says:
二月 4th, 2009 at 10:46
好使！！！
yeyushu Says:
四月 24th, 2009 at 14:50
很奇怪的是我在本地测试没问题但是上传到服务器上就出问题了。
uukn Says:
五月 28th, 2009 at 12:46
方法不妥谁都会说。你既然说了为什么不拿出来一个好的解决方案呢?不要光说大话，要有实际行动才行，不然你只能让人讨厌！
cbm Says:
六月 1st, 2009 at 09:47
万恶的IE6让人折腾.
Ton.Y Says:
八月 31st, 2009 at 13:17
如果想在背景PNG里使用改怎么修改？
华晨 Says:
十一月 3rd, 2009 at 08:29
还是没看懂怎么做到的。
cbm Says:
十一月 4th, 2009 at 15:57
无视IE6吧.支持了这么久,够给面子了.
fie Says:
五月 6th, 2010 at 18:14
10年了。要继续用的话就不提出新需求。一个更新的东西怎么提供新功能？不懂技术的人是不知道什么ie6,7,8的。懂点技术的人情不要一厢情愿地认为大家还用ie6.他们还用是因为他们不知道。我觉得懂点技术的人应该推广最新的浏览器给不懂的人。而不是去兼容ie6。现在不是用户偏爱ie6而是他们根本不知道什么是ie什么是浏览器。
cbm Says:
五月 9th, 2010 at 14:45
现在是可以开始放弃了。
shiny Says:
六月 20th, 2010 at 14:59
一般我img里使用24位png，用此法解决问题；背景一般用8位png；实在不行的优雅降级处理，放弃对IE6的支持。
cbm Says:
六月 28th, 2010 at 01:58
是可以放弃ie6了。放了十年的牛奶。
help Says:
七月 6th, 2010 at 17:41
我下载你的测试包，原封不动，改一下大背景颜色，还是无法显示透明效果，求救ING。。

QQ：271127886
cbm Says:
七月 9th, 2010 at 00:43
这个我不好回答，首先保证测试包在你那里是Ok的。
阿蒙 Says:
四月 28th, 2011 at 13:39
没成功的试试这个解决方案吧
http://unitinteractive.com/labs/unitpngfix.php
Birdie Says:
十一月 3rd, 2011 at 11:22
很奇怪说什么放弃不放弃的。谁放弃？说服广大网民去放弃？还是放弃用IE6的网民？新浏览器是要推广，但是网站的开发者一定要全面考虑。用户看到你的网站的时候，专注的是网站的内容，一味地要求人家去升级才能正常浏览，容易引起排斥心理。
网页能对浏览器最大兼容才是王道！IE6的市场还是很大的，必须考虑。
huarong Says:
九月 6th, 2012 at 15:46
考虑你妹！

抵制IE6的网站越多，才会促进社会的进步。

cbm's land

透明PNG在IE6下的官方解决方案

26 Responses to “透明PNG在IE6下的官方解决方案”

Leave a Reply