武林網(www.survivalescaperooms.com)文章簡介：CSS3草案中定義了{opacity: | inherit;}來聲明元素的透明度，這已經得到了大多數現代瀏覽器的支持，而IE則很早通過特定的私有屬性filter來實現的，所以HTML元素的透明效果已經無處不在了。
CSS3草案中定義了{opacity: | inherit;}來聲明元素的透明度，這已經得到了大多數現代瀏覽器的支持，而IE則很早通過特定的私有屬性filter來實現的，所以HTML元素的透明效果已經無處不在了。首先看看A級瀏覽器所支持的用CSS實現元素透明的方案：
瀏覽器最低
版本方案
Internet Explorer4.0filter: alpha(opacity=xx);
5.5filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx);
8.0filter: "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
Opera9.0opacity
Safari (WebKit)1.2 (125)opacity
實際上在IE8中，-ms-filter是filter的別名，兩者區別是-ms-filter的屬相值必須被單引號或雙引號包圍，而filter中則不是必須，而在IE8之前的版本中，filter的屬性值必須不被單引號或雙引號包圍。
IE中的HTML元素要實現透明，則其必須具備layout，這樣的元素有僅可讀的屬性hasLayout，且其值為true。具體情況如下：
關于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-IEel.style.opacity = i; }else if(document.documentElement.currentStyle){ // for IEif(!el.currentStyle.hasLayout){el.style.zoom = 1;}if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效，所以再次設置inline-blockel.style.display = 'inline-block';}el.style.filter = 'alpha(opacity='+ i * 100 +')'; }}//獲取CSS opacity 屬性值的函數//借鑒自#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 DXImageTransformvalue = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;} catch(e) {try { // make sure its in the documentvalue = el.filters('alpha').opacity;} catch(err) {}}return value / 100; }}不得不說，這些事都是IE整出來的
新聞熱點
疑難解答
