先附上一个文档:IE6 IE7 IE8 Hack测试官方文档: 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 检验
分享到:
相关推荐
ie6 ie7 ff浏览器兼容 border:2px solid #00f; /*IE、ff的属性*/ border:2px solid #090\9; /* IE6/7/8的属性 */ border:2px solid #F90\0; /* IE8支持 */ *border:2px solid #F00; /* IE6、7支持 */ _border:2...
兼容ie,FF,chrome,opera的弹出层居中js。
JavaScript 瀑布流 吸顶 兼容IE FF Chrome
CSS完美兼容IE6IE7FF的通用方法
CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法
一个图片居中的CSS示例,兼容IE6,7,8和FF,opera,safari
CSS完美兼容IE6/IE7/FF的通用方法 一、CSS HACK 以下两种方法几乎能解决现今所有HACK.
div css完美兼容IE6,IE7,FF的通用方法说明。
jsencrypt 兼容IE8,Chrome,FF,包括exports.default,Object.defineProperty不兼容问题处理等。
CSS兼容IE6,IE7和FF的总结 . 区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; ...
css下拉菜单示例,兼容ie678,ff,chrome
JS图片预览(兼容IE6、IE7、IE8和FF)
光标处插入,兼容IE系列,FF等,适用于编辑器,浏览插入表情 //网上没有真正兼容IE和FF的代码,只是做到一种; //代码为本人对IE和FF光标插入支持整合修改;
在ie6 ie7 ie8 ff浏览器下显示不同的效果,测试的时候很好用哦。
纯JS拖动IDV,不需要第三方库,兼容IE6 7 8 9 以上版本和 谷歌、火狐浏览器。代码简洁,在FF 谷歌浏览器 是拖动时,鼠标可以保持MOVE样式不变。
省市县选择器,支持 ie6/7/8 和火狐
css兼容IE6、IE7、FF的技巧 IE兼容问题 FF兼容问题