首先看看A级浏览器所支持的用CSS实现元素透明的方案:
浏览器 | 最低 版本 |
方案 |
---|---|---|
Internet Explorer | 4.0 | filter: alpha(opacity=xx); |
5.5 | filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx); |
|
8.0 | filter: "alpha(opacity=xx)"; |
|
Firefox (Gecko) | 0.9 (1.7) | opacity |
Opera | 9.0 | opacity |
Safari (WebKit) | 1.2 (125) | opacity |
实际上在IE8中,-ms-filter是filter的别名,两者区别是-ms- filter的属相值必须被单引号或双引号包围,而filter中则不是必须,而在IE8之前的版本中,filter的属性值必须不被单引号或双引号包围。
IE中的HTML元素要实现透明,则其必须具备layout,这样的元素有仅可读的属性hasLayout,且其值为true。具体情况如下:
body
、img
、table
、tr
、th
、td
等元素的hasLayout
一直为true
。 type
为text
、button
、file
或select
的input
的hasLayout
一直为true
。 {position:absolute}
的元素的hasLayout
为true
{float:left|right}
的元素的hasLayout
为true
{display:inline-block}
的元素的hasLayout
为true
{height:xx}
或{width:xx}
的元素必须具体以下两个条件之一,其hasLayout
才能为true
:
display
的值是block
,如demo3就不行。 {zoom:xx}
的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout
为true
,但在IE8的标准模式下则不会触发hasLayout
。 {writing-mode:tb-rl}
的元素的hasLayout
为true
。 contentEditable
的属性值为true
。 {display:block}
的元素的hasLayout
一直为true
,如demo8。 关于hasLayout的更多详情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout
从上面就可以看出IE实现HTML元素的透明如此混乱,为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式,比如CSS Opacity实例中的demo1到demo8,虽然IE 团队推荐实现透明的方式是:
实际上目前最流行的JavaScript框架的设置样式方法都是应用这种方式,并且针对IE设置了{zoom:1}
来让元素的hasLayout
为true
,但在IE8的标准模式下zoom
并不能触发hasLayout
,所以利用它们设置hasLayout
为false
的元素的透明度时在IE8的标准模式下是失败的,这个bug在YUI(我已经给YUI团队提交了这个bug,他们会在下个版本修复,最新的 2.8.0中依旧存在,期待2.9.0吧)、Prototype、jQuery和Mootools的最新版本中都存在,具体请在IE8标准模式下看demo9到demo11。同样由于在IE8中设置透明度的方式多种多样,所以利用JavaScript获取HTML元素的透明度值需要考虑多种情况,YUI完美解决了这个问题,Prototype比jQuery稍微周全一点,而Mootools直接是bug,具体可以在IE下看demo1到demo8的演示。从这个角度给4个框架来个排名的话,YUI第一、 Prototype第二、jQuery第三、Mootools垫底。
我简单的实现了设置和获取Opacity的函数,可以避开上面框架存在的bug,请在IE8标准模式下看demo12:
原文:http://www.jb51.net/css/24765.html