用DD_belatedPNG插件修复IE6 PNG

IE6是一个令人作呕的话题,个人极为厌恶IE6,并且恨屋及乌,不过没有办法,中国就是这么一个神奇的国度,到了2010年仍然有不少人以使用“简单、快捷”的IE6为荣,不知道浏览器为何物的也更加不提了,而这种人往往又是互联网中广告点击的生力军,消费能力强,所以你必须照顾到他们的感受。

我对IE6恨之入骨的重要原因之一,恐怕就是对PNG各种半透明的支持情况了。我们在其他浏览器可以轻松实现的图片半透明效果,到了IE6这儿就得纠结蹉跎,虽然IE6勉强的支持PNG-8格式的伪半透明,但这个和GIF图片的效果相差并不大,如果你使用PNG-32的话,你所有的半透明区域都会变成灰底。

网上有不少IE6上实现PNG半透明的工具,各有千秋,大多数使用了IE的一个滤镜:AlphaImageLoader,使用后会有各种诸如问题(比如background-position和background-repeat属性支持的不完善,有些还会擅自更改背景图片的尺寸)。DD_belatedPNG提供了一种新的选择,他使用微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性。

查看Demo | 打包下载

其使用方法也不难,先在此下载DD_belatedPNG ,然后插入head标签中:

将所有需要需要修补的元素加上class=”png”即可

PS:对于:focus和:hover伪类,则需要将以上代码中的 :
DD_belatedPNG.fix(‘.png’);
修改为 :
DD_belatedPNG.fix(‘.png,a.png:hover,.png:focus’);

BTW:虽然这样可以缓解IE6下PNG的问题,不过会带来性能问题,还有一些其他的问题,自然是不如对png半透明有原生支持的浏览器的。所以,赶快让该死的IE6下地狱吧。阿门!

反IE6代码

如果你用IE6访问本站会有一个简单的提示,请你升级浏览器,有兴趣的朋友可以参照一下方法:
打开你的Wordpress模板(此方法同样适用于其他所有支持自定义js以及html的模板),找到</head> ,在其之前插入以下代码:

找到<body> ,在其后或其他合适位置添加以下代码:

保存(上传),就可以看到效果了。