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

我在一个

复选框上做了一些定制，并尝试在IE8中使用不透明。
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=20）”
；正在处理div，但当我使用checkbox时，它不工作。在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>

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;
    }

<!-- 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;
}

<!-- 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;
}

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

/* 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索引。我发现，与官方规范相反，如果父元素不透明，Chrome和Firefox将使父元素中的所有元素都不透明。IE实际上正确地实现了它，它不仅考虑了元素所在的父元素，还考虑了元素相对于父元素的z索引

示例1:

    <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>

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;
    }

<!-- 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;
}

<!-- 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;
}


/*CSS*/
.透明{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=20）”；
过滤器：α（不透明度=20）；
-moz不透明度：0.2；
-khtml不透明度：0.2；
不透明度：0.2；
}

在这种情况下，父元素和子元素都将应用不透明度属性

示例2:

    <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>

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;
    }

<!-- 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;
}

<!-- 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;
}


/*CSS*/
#母公司{
位置：相对位置；
z指数：0；
}
#孩子{
位置：相对位置；
z指数：1；
}
.透明{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=20）”；
过滤器：α（不透明度=20）；
-moz不透明度：0.2；
-khtml不透明度：0.2；
不透明度：0.2；
}

在本例中，子元素的z索引大于父元素。本质上，如果能够将标记绕x轴旋转90度，则会在z轴上看到两个单独的层。在上面的示例中，我发现Chrome和Firefox使两个元素都不透明，即使它们位于两个不同的层上。在IE中，它们没有（根据官方规范）。是不透明度属性的官方规范。以下是相关片段：

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

我知道这可能比你想要的要多一些，但我看到你在CSS中有定位，我以前也被这个问题困扰过，所以我想我会和大家分享

祝你好运和快乐