IE6下PNG透明图片背景显示灰色的完美解决方法

IE6下PNG透明图片背景显示灰色的完美解决方法

--By apei830 2010//04/07

一、unitpngfix.js方法

1)        下载unitpngfix.js

http://labs.unitinteractive.com/unitpngfix.php

2)        解压缩unitpngfix.zip得到图片“clear.gif”和js文件“unitpngfix.js”，将2个文件拷贝至WebRoot下，当然也可以放在图片和js相应的目录，如：

WebRoot/imges/clear.gif

WebRoot/js/unitpngfix.js

3)        修改unitpngfix.js

在第一行加入如下代码：

var clear="images/clear.gif";//注意图片路径

4)        在html页面中，加入js引用代码：

<!--[if lt IE 7]>

<script type="text/javascript" src="js/unitpngfix.js"></script>

<![endif]-->

 

5)        注意事项：

通过css文件设置的png背景，使用此种方式后，会导致IE6浏览器下部分超链接显示不出来，页面代码类似于：

<style type="text/css">

#img {

width:256px;

height:256px;

background-image: url(images/logo.png);

}

</style>

<div id="img">

<a href="http://www.baidu.com">百度一下</a>

</div>

如果有遇到，请在css内加入如下代码：

#img a {

position: relative;

}

 

二、IE7.js方法

1)        下载IE7.js

http://code.google.com/p/ie7-js/downloads/list

2)        解压缩ie7-2[1].1(beta3).zip， 得到图片“blank.gif”和js文件“IE7.js”，将2个文件放置在同一个目录底下，如：

WebRoot/js/blank.gif

WebRoot/js/IE7.js

 

3)        在IE7.js第一行加入：

var IE7_PNG_SUFFIX = ".png";//配置js处理的png图片

不加此行，默认只能处理文件名为*-trans.png的图片

4)        在html页面中，加入js引用代码：

<!--[if lt IE 7]>

<script type="text/javascript" src="js/IE7.js"></script>

<![endif]-->

 

三、总结：

建议使用unitpngfix.js方法，因为IE7.js方法的处理方式是图片先加载后处理，客户在浏览时还是会有短暂时间浏览到未处理的PNG图片。