Filter Opacity無法用於複選框（IE8）

我在checkbox上做了一些自定義設置，並嘗試使IE8中的不透明度工作。 The -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";正在使用div，但是當我使用複選框時，它不起作用。在Chrome和Firefox中，不透明效果正確。不透明度適用於輸入/標籤元素？Filter Opacity無法用於複選框（IE8）

HTML：

<div class="col-xs-4 col-sm-4 col-md-4 data-stats"> 
     <div class="check-user-data"> 
      <input type="checkbox" value="checked" id="review-username" name="check"/> 
      <label for="review-username"></label> 
     </div> 
    </div>

CSS：

input[type=checkbox] { 
     visibility: hidden; 
    } 

    .check-user-data { 
     height: 50px; 
     text-align: center; 
    } 

    .check-user-data label { 
     cursor: pointer; 
     position: absolute; 
    } 

    .check-user-data label:after { 
     font-family: 'Glyphicons Halflings'; 
     content: "\e013"; 
     position: absolute; 

     /* IE 8 */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 

     opacity: 0.2; 
    } 

    .check-user-data label:hover::after { 
     color: #49FF90; 

     /* IE 8 */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

     opacity: 0.5; 
    } 

    .check-user-data input[type=checkbox]:checked + label:after { 
     color: #3BCC73; 

     /* IE 8 */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 

     opacity: 1; 
    }

來源

2013-10-24 mnlfischer

請務必包含所有相關的不透明度屬性：

/* IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 

/* IE 5-7 */ 
filter: alpha(opacity=20); 

/* Netscape Based Browsers (Mozilla */ 
-moz-opacity: 0.2; 

/* For early Safari's (1.x) */ 
-khtml-opacity: 0.2; 

/* Official CSS property */ 
opacity: 0.2;

我不知道哪個瀏覽器你支持但是t應該爲您今天使用的大多數主流瀏覽器版本提供支持。

另外，我自己在一些代碼中遇到了這個問題。確保有問題的複選框在不透明度的父級上方沒有z-index。我發現，與官方規範相反，如果父級不透明，Chrome和Firefox將使父級中的所有元素都不透明。 IE實際上正確地實現了它，它不僅考慮了元素所在的父元素，而且還考慮了元素相對於父元素的z索引。

實施例1：

<!-- Markup --> 
<div id="parent" class="transparent"> 
    <div id="child"></div> 
</div> 

/* CSS */ 
.transparent { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 
    filter: alpha(opacity=20); 
    -moz-opacity: 0.2; 
    -khtml-opacity: 0.2; 
    opacity: 0.2; 
}

在這種情況下，兩個父元素和子元素將具有施加給它們的不透明度特性。

實施例2：

<!-- Markup --> 
<div id="parent" class="transparent"> 
    <div id="child"></div> 
</div> 

/* CSS */ 
#parent { 
    position: relative; 
    z-index: 0; 
} 

#child { 
    position: relative; 
    z-index: 1; 
} 

.transparent { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 
    filter: alpha(opacity=20); 
    -moz-opacity: 0.2; 
    -khtml-opacity: 0.2; 
    opacity: 0.2; 
}

在這個例子中，子元件具有z索引比母體大。實質上，如果您能夠圍繞x軸旋轉標記90度，則會在z軸上看到兩個單獨的圖層。在上面的例子中，我發現即使元素駐留在兩個不同的層上，Chrome和Firefox也會使兩個元素都不透明。在IE瀏覽器中，他們沒有（按官方規範）。 Here是不透明屬性的官方規範。下面是相關的片段：

由於具有小於1的不透明度的元素是從單個屏幕外圖像合成的，因此它之外的內容不能以z順序在其內部的多個內容之間進行分層。出於同樣的原因，實現必須爲不透明度小於1的任何元素創建新的堆疊上下文。如果不透明度小於1的元素未定位，則實現必須在其父堆疊上下文中將其創建的圖層繪製在相同堆疊順序，如果它是「z-index：0」和「不透明度：1」的定位元素，則將使用該順序。如果一個不透明度小於1的元素被定位，那麼'z-index'屬性的應用如[CSS21]中所述，除了'auto'被視爲'0'以來，因爲總是創建新的堆疊上下文。有關堆疊上下文的更多信息，請參見[CSS21]的第9.9節和附錄E.本段中的規則不適用於SVG元素，因爲SVG具有自己的渲染模型（[SVG11]，第3章）。

我知道這可能比你尋找的要多一點點，但是我看到你已經定位在你的CSS中，並且之前我被這個問題困擾過，所以我想我會分享。

祝你好運，快樂編碼！

來源

2013-10-24 13:21:14 War10ck

Filter Opacity無法用於複選框（IE8）

回答

相關問題