CSS實現HTML元素透明的那些事

CSS3草案中定義了{opacity:<length> | inherit;}來聲明元素的透明度，這已經獲得了大多數現代瀏覽器的支持，而IE則很早經過特定的私有屬性filter來實現的，因此HTML元素的透明效果已經無處不在了。首先看看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)"; filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=xx)"; -ms-filter: "alpha(opacity=xx)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
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。具體狀況以下：

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（我已經給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第1、Prototype第2、jQuery第3、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';
    }
    try{
      //測試是否已有filter //http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx       if(el.filters){
        if(el.filters('alpha')){
	  el.filters('alpha').opacity = i * 100;
	}else{
	  el.style.filter += 'alpha(opacity='+ i * 100 +')';
	 }
       }
    }catch(e){
      el.style.filter = 'alpha(opacity='+ i * 100 +')';
    }
  }
}//獲取CSS opacity 屬性值的函數 //借鑑自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle var 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整出來的……