CSS教程:关于网页中的透明元素

css3草案中定义了{opacity: | inherit;}来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而ie则很早通过特定的私有属性filter来实现的，所以html元素的透明效果已经无处不在了。首先看看a级浏览器所支持的用css实现元素透明的方案：

实际上在ie8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在ie8之前的版本中，filter的属性值必须不被单引号或双引号包围。

ie中的html元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性haslayout，且其值为true。具体情况如下：

1. body、img、table、tr、th、td等元素的haslayout一直为true。
2. type为text、button、file或select的input的haslayout一直为true。
3. 设置{position:absolute}的元素的haslayout为true
4. 设置{float:left|right}的元素的haslayout为true
5. 设置{display:inline-block}的元素的haslayout为true
6. 设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其haslayout才能为true：
   1. ie8兼容模式和ie8以前的浏览器中，在标准(strict)模式下其display的值是block，如demo3就不行。
   2. 元素在怪癖模式（compat mode）下。
7. 设置了{zoom:xx}的元素在ie8的兼容模式或ie8之前的浏览器中其haslayout为true，但在ie8的标准模式下则不会触发haslayout。
8. 设置了{writing-mode:tb-rl}的元素的haslayout为true。
9. 元素的contenteditable的属性值为true。
10. 在ie8标准模式下设置了{display:block}的元素的haslayout一直为true，如demo8。

关于haslayout的更多详情可以看exploring internet explorer “haslayout” overview和on having layout

从上面就可以看出ie实现html元素的透明如此混乱，为了向下兼容和自己的私有属性让ie上实现元素透明有多种方式，比如css opacity实例中的demo1到demo8，虽然ie团队推荐实现透明的方式是：

{  -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=50)";  filter: progid:dximagetransform.microsoft.alpha(opacity=50);  opacity: .5;}

而目前简单最好用的实现方式是如css opacity中demo4这样：

{    filter:alpha(opacity=30);    opacity:.3;}

实际上目前最流行的javascript框架的设置样式方法都是应用这种方式，并且针对ie设置了{zoom:1}来让元素的haslayout为true，但在ie8的标准模式下zoom并不能触发haslayout，所以利用它们设置haslayout为false的元素的透明度时在ie8的标准模式下是失败的，这个bug在yui、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：

//设置css opacity 属性的函数，解决ie8的问题var setopacity = function(el,i){  if(window.getcomputedstyle){// for non-ie    el.style.opacity = i;  }else if(document.documentelement.currentstyle){ // for ie    if(!el.currentstyle.haslayout){      el.style.zoom = 1;    }    if(!el.currentstyle.haslayout){ //在ie8中zoom不生效，所以再次设置inline-block      el.style.display = 'inline-block';    }    el.style.filter = 'alpha(opacity='+ i * 100 +')';  }}//获取css opacity 属性值的函数//借鉴自http://developer.yahoel.com/yui/docs/yahoo.util.dom.html#method_getstylevar getopacity = function(el){  var value;  if(window.getcomputedstyle){    value = el.style.opacity;    if(!value){      value = el.ownerdocument.defaultview.getcomputedstyle(el,null)['opacity'];    }    return value;  }else if(document.documentelement.currentstyle){    value = 100;    try { // will error if no dximagetransform        value = el.filters['dximagetransform.microsoft.alpha'].opacity;    } catch(e) {        try { // make sure its in the document            value = el.filters('alpha').opacity;        } catch(err) {        }    }    return value / 100;  }}

不得不说，这些事都是ie整出来的