首先看看A級(jí)瀏覽器所支持的用CSS實(shí)現(xiàn)元素透明的方案:
| 瀏覽器 | 最低 版本 | 方案 |
|---|---|---|
| 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 |
實(shí)際上在IE8中,-ms-filter是filter的別名,兩者區(qū)別是-ms- filter的屬相值必須被單引號(hào)或雙引號(hào)包圍,而filter中則不是必須,而在IE8之前的版本中,filter的屬性值必須不被單引號(hào)或雙引號(hào)包圍。
IE中的HTML元素要實(shí)現(xiàn)透明,則其必須具備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}的元素必須具體以下兩個(gè)條件之一,其hasLayout才能為true: display的值是block,如demo3就不行。 {zoom:xx}的元素在IE8的兼容模式或IE8之前的瀏覽器中其hasLayout為true,但在IE8的標(biāo)準(zhǔn)模式下則不會(huì)觸發(fā)hasLayout。 {writing-mode:tb-rl}的元素的hasLayout為true。 contentEditable的屬性值為true。 {display:block}的元素的hasLayout一直為true,如demo8。 關(guān)于hasLayout的更多詳情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout
從上面就可以看出IE實(shí)現(xiàn)HTML元素的透明如此混亂,為了向下兼容和自己的私有屬性讓IE上實(shí)現(xiàn)元素透明有多種方式,比如CSS Opacity實(shí)例中的demo1到demo8,雖然IE 團(tuán)隊(duì)推薦實(shí)現(xiàn)透明的方式是:
新聞熱點(diǎn)
疑難解答
圖片精選