IE PNG FIX

2011.02.10

大家都知道在IE6及以下版本对png图片支持不是很好,透明的部分会显示为灰色,目前解决这一BUG的方法有多种,一种是使用http://jquery.andreaseberhard.de/pngFix/的方法,一种是使用http://www.twinhelix.com/css/iepngfix/的方法。

从在项目中使用的经验来看,更偏向于使用第二种方法(http://www.twinhelix.com/css/iepngfix/),这种方案更稳定,效果很好,使用简单,支持png背景。

使用方法如下三步即可:

一. 先下载iepngfix.zip文件包,将blank.gif、iepngfix.htc、iepngfix_tilebg.js三个文件放入相应目录
  blank.gif 为透明的1×1大小的gif图片
  iepngfix.htc 需要在CSS代码中调用

二. 在你的CSS代码中需要对png兼容处加上{behavior:url("/javascripts/iepngfix.htc")}
如: 
你需要修改iepngfix.htc文件中
var thisFolder = document.URL.replace(/(\\|\/)[^\\\/]*$/, '/');
IEPNGFix.blankImg = thisFolder + ''blank.gif'';
保证blank.gif的文件位置正确。

三. 最后在页面中引入 JS文件,以支持png背景。

-------- 到此完成!--------

为了获得更好的效果,我们可以这样做:

需要对png图片兼容的代码处加上class: pngfix即可,这样一来减少了对不同元素的处理,维护一个样式即可,同时也避免了对其它浏览器的影响。
不过我在项目中的处理是通过后台程序判断访问的浏览器类型及版本,只将这两行代码输出给IE6

 

Home Blog Delicious Github Flickr About Contact

© Miclle.Zheng . Powered by Forest Chalet