css3草案中定義了{opacity: | inherit;}來聲明元素的透明度，這已經得到了大多數(shù)現(xiàn)代瀏覽器的支持，而ie則很早通過特定的私有屬性filter來實現(xiàn)的，所以html元素的透明效果已經無處不在了。首先看看a級瀏覽器所支持的用css實現(xiàn)元素透明的方案：

實際上在ie8中，-ms-filter是filter的別名，兩者區(qū)別是-ms-filter的屬相值必須被單引號或雙引號包圍，而filter中則不是必須，而在ie8之前的版本中，filter的屬性值必須不被單引號或雙引號包圍。

ie中的html元素要實現(xiàn)透明，則其必須具備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的標準模式下則不會觸發(fā)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實現(xiàn)html元素的透明如此混亂，為了向下兼容和自己的私有屬性讓ie上實現(xiàn)元素透明有多種方式，比如css opacity實例中的demo1到demo8，雖然ie團隊推薦實現(xiàn)透明的方式是：

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

而目前簡單最好用的實現(xiàn)方式是如css opacity中demo4這樣：

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

實際上目前最流行的javascript框架的設置樣式方法都是應用這種方式，并且針對ie設置了{zoom:1}來讓元素的haslayout為true，但在ie8的標準模式下zoom并不能觸發(fā)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墊底。

我簡單的實現(xiàn)了設置和獲取opacity的函數(shù)，可以避開上面框架存在的bug，請在ie8標準模式下看demo12：

//設置css opacity 屬性的函數(shù)，解決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 屬性值的函數(shù)//借鑒自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整出來的