先附上一个文档：IE6 IE7 IE8 Hack

测试官方文档: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx 



说明：以下方法通过CSS Hack实现。



网上还有文章，关于ie6 ie7 ie8 ff的CSS Hack测试结果，根据结果你也可以自己写出针对性的PNG透明方法，但是这里给出的是一个最简单的。



首先说下针对思路。以下是透明背景与透明滤镜的各种测试结果：



透明背景PNG：IE6 不支持 | IE7 支持 | IE8 支持 | FF 支持



透明背景滤镜：IE6 支持 | IE7 支持 | IE8 支持 | FF 不支持



滤镜和背景重叠：IE6 /(不可能共存) | IE7 重叠 | IE8 不重叠 | FF /(不可能共存)

最精简的PNG透明代码：





类 {

width: 100%; height: 100%; background: url(PNG地址) no-repeat left top; {你的其他代码}

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="PNG地址");

_background: none;

}



以下是代码高亮后的代码（代码是一致的，只是为了增加可读性）：



类 {

width: 100%; height: 100%; background: url(PNG地址) no-repeat left top;

{你的其他代码}

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="PNG地址");

_background: none;

}



以上：



粗体部分表示重点注意，必须保留的部分（但是也不代表没有加粗的部分就不用保留了- -||）



斜体部分表示你需要根据自己的实际情况修改的地方。

width: 100%; height: 100%; 这个必须保留不过100%可以修改，因为如果没有宽或高，滤镜就会失效~



no-repeat left top 这个可以写 也可以不写 自己实际情况修改



{你的其他代码} 这里就写你的其他代码，如display: inline等等~



_background: none; 这个虽然不写也貌似没有问题，但是还是避免小问题，把这句写上。



Hack原理说白了很简单，“_属性”这个只有IE6支持，于是 滤镜只针对了IE6，无背景 也只针对了IE6。





注意：



（1）透明Filter将会导致那一块区域的超链接（文字及图片）、表单全部无法点击 (IE6问题)，因为滤镜在IE6中位于超链接、表单之上。解决办法就是使它们相对浮动（Css语句: position: relative; 推荐用法: _position: relative; ）



（2）CSS Hack 无法通过 W3C 的 CSS 检验