IE6 透明PNG图片BUG解决办法

png透明针对 IE6一直是件挺麻烦 的事情，使用的方法也 是各有不同，大多的原 理是用IE的滤镜来解 决的。

语法：
filter : progid:DXI mageTransf orm.Micros oft.AlphaI mageLoader ( enabled=bE nabled , sizingMeth od=sSize , src=sURL )

enabled : 可选项。布尔值(Bo olean)。设置或 检索滤镜是否激活。t rue | false true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(St ring)。设置或检 索滤镜作用的对象的图 片在对象容器边界内的 显示方式。 crop : 剪切图片以适应对象尺 寸。
image : 默认值。增大或减小对 象的尺寸边界以适应图 片的尺寸。scale : 缩放图片以适应对象的 尺寸边界。
src : 必选项。字符串(St ring)。使用绝对 或相对 url 地址指定背景图像。假 如忽略此参数，滤镜将 不会作用。

现在一般在使用的方法 有一下几种：

1、css方法

css：

.pngs {
height: 90px;width : 90px;
background -image:url (icon_home .png)!impo rtant;  /* FF IE7 */
background -repeat: no-repeat; _filter: progid:DXI mageTransf orm.Micros oft.AlphaI mageLoader (src=’icon _home.png’ );  /* IE6 */
_ background -image: none; /* IE6 */
}

xhtml：

这种方法的优点就是使 用简单方便，但是不能 作为背景，且只能用作 单个png图片的使用 。如果要作为背景，需 要新增加一个div层 ，并设置其posit ion:relati ve;

css
.png div{positi on:relativ e;}

xhml:

CSS 背景PNG透明 及 链接失效问题解决

这种方法可以使用在那 些png图片不多，且 不需要repeat的 情况下。

2、js方法

< language=” JavaScript ”>
function correctPNG () // correctly handle PNG transparen cy in Win IE 5.5 & 6.
{
var arVersion = navigator. appVersion .split(“MS IE”)
var version = parseFloat (arVersion [1])
if ((version >= 5.5) && (document. body.filte rs))
{
for(var j=0; j

这种js先判断是否I E，然后判断ie版本 ，版本在6.0下则判 定函数，给png的图 片添加滤镜。

使用起来的确方便，无 论多少图片都可以解决 ，但是依然无法rep eat。

3、htc方法

htc相当于完全通过 插件的方法修复的IE 6的bug，功能强大 ，支持repeat， 背景等功能，使用起来 也很方便。

使用一个iepngf ix.htc 文件，和一个透明的g if文件。

使用方法：

  //在这里可以加入其 他用到png图片的i d或者class
< type=”text /javascrip t” src=”jscss /iepngfix_ tilebg.js” >

ps：如果需要rep eat背景，往往需要 设置这个div 宽度为100%。

使用见： http://qqgame.qq.com/act/a20091210prize4/index.htm ，在其中有iepn gfix.htc可下 载。

总结这几种方法，第三 种方法是最简单使用， 且容易推广的方法，建 议可以做个公共的地址 ，有产品需要，只需要 应用这个公共地址就行 了。