Question

我在checkbox上做了一些自定义，并尝试在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;
    }

Answer 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属性的官方规范。以下是相关摘录：

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

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

祝你好运，编码愉快！

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

1 个答案: