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

先附上一个文档: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 检验

本博客所有文章如无特别注明均为原创。作者:sysdee复制或转载请以超链接形式注明转自 成功志
原文地址《兼容IE6 IE7 IE8 FF Opera Chrome 的最精简PNG透明方法
分享到:更多

相关推荐

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(0)