过滤器不透明度不适用于复选框（IE8）

Posted 2023-03-06

【中文标题】过滤器不透明度不适用于复选框（IE8）

【英文标题】：Filter Opacity not Working for Checkbox (IE8)

【发布时间】：2013-11-03 03:51:06

【问题描述】：

我对@9​​87654321@ 进行了一些自定义，并尝试使不透明度在 IE8 中工作。 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";正在处理 div，但是当我使用复选框时，它不起作用。在 chrome 和 firefox 中，不透明度工作正常。不透明度适用于输入/标签元素？

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;
    

【参考方案1】：

确保包含所有相关的不透明度属性：

/* 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;

我不知道您支持哪种浏览器，但这应该可以为您提供对当今使用的大多数主流浏览器版本的支持。

另外，我自己在一些代码中遇到了这个问题。确保有问题的复选框在具有不透明度的父级上方没有z-index。我发现，与官方规范相反，如果父级不透明，Chrome 和 Firefox 将使父级内的所有元素不透明。 IE实际上正确地实现了它，它不仅考虑了元素所在的父元素，还考虑了元素相对于父元素的z-index。

示例 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-index 大于父元素。本质上，如果您能够将标记围绕 x 轴旋转 90 度，您将在 z 轴上看到两个单独的层。在上面的示例中，我发现 Chrome 和 Firefox 将这两个元素呈现为不透明，即使这些元素位于两个不同的层上。在 IE 中，它们没有（根据官方规范）。 Here 是 opacity 属性的官方规范。下面是相关的sn-p：

由于不透明度小于 1 的元素是由单个屏幕外图像合成的，因此其外部的内容无法在其内部的内容块之间按 z 顺序分层。出于同样的原因，实现必须为不透明度小于 1 的任何元素创建新的堆叠上下文。如果未定位不透明度小于 1 的元素，则实现必须在其父堆叠上下文中同时绘制它创建的层如果它是具有“z-index：0”和“不透明度：1”的定位元素，将使用的堆叠顺序。如果定位了不透明度小于 1 的元素，则应用“z-index”属性，如 [CSS21] 中所述，除了“auto”被视为“0”，因为总是创建新的堆叠上下文。有关堆叠上下文的更多信息，请参见 [CSS21] 的第 9.9 节和附录 E。本段中的规则不适用于 SVG 元素，因为 SVG 有自己的渲染模型（[SVG11]，第 3 章）。

我知道这可能比你想要的多一点，但我看到你的 CSS 中有定位，我之前一直被这个问题困扰，所以我想我会分享。

祝你好运，编码愉快！