IE9透明filter和opacity同時生效的解決辦法 IE9 hack only

轉載請註明：來自於http://www.cnblogs.com/bluers/

問題：

　　假設結構以下：

　　

<div class="wrapper">
    <p class="cover"></p>
    <img src="http://gg.blueidea.com/2014/360/360.jpg">
</div>

 

　　若背景須要透明，一般會這麼寫：

　　

.wrapper{
    position:relative;
    width:100px;
    height:100px;
}
 .cover{
    position:absolute;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    background-color:#000;
    filter:alpha(opacity=50);
 }  

在IE7,8,10以及chrome,firefox下正常。但在IE9下會產生雙重透明的狀況。見圖

緣由：IE9識別filter，也識別rgba，因此致使了雙重透明。而目前尚未只在IE9下生效的CSS HACK（若有請指正），<!-- if IE9 -->除外。

解決辦法：

    

.wrapper{
    position:relative;
    width:100px;
    height:100px;
}
 .cover{
    position:absolute;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    background-color:#000;
    filter:alpha(opacity=50);
 }
.cover:not(IE9Only){
    filter:alpha(opacity=100);
}

 

重點在於這個小精靈【:not(selector)】，selector隨意

 

解釋：

　　:not（selector）僅僅在IE9+下生效。IE9會自動忽略:not以及以後的內容並生效與當前元素，但IE10會產生實際做用。

所以IE9下，生效的代碼爲

.cover{
    position:absolute;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    background-color:#000;
    filter:alpha(opacity=50);
 }
.cover{
    filter:alpha(opacity=100);
}

而IE10生效的代碼爲

.cover{
    position:absolute;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    background-color:#000;
    filter:alpha(opacity=50);
 }

從而很好的分辨出了IE9。這也能夠做爲IE9單獨使用的一個css hack。