兼容IE6 IE7 IE8 FF Opera Chrome 的最精简PNG透明方法

Myth丶恋晨 2022-09-30 00:44 168阅读 0赞

先附上一个文档：IE6 IE7 IE8 Hack测试官方文档: [http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx][http_msdn.microsoft.com_en-us_library_cc351024_VS.85_.aspx]

网上一直有很多关于让IE6支持透明PNG的办法。不过问题是现在讨厌的IE7,IE8出现了，那些方法都有不兼容新浏览器的地方（包括重复渲染，比如原来设定的50%透明度，重复渲染了就变成不透明了……）

于是为了解决这个问题我不惜在这台很“差”的电脑上同时装上了IE6 IE7 IE8 FF……（IE8为Beta版本，正式版本的共存版本没有找到……）。

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

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

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

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

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

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

网上有一个广为流传的透明办法，但是非常复杂而且对于IE8也有兼容问题。于是根据各种浏览器的Hack，本人写出了一个兼容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 检验

[http_msdn.microsoft.com_en-us_library_cc351024_VS.85_.aspx]: http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx