复选框样式在Internet Explorer中不起作用

Question

我正在创建一个表格，其中手风琴隐藏了一个乘法复选框，到目前为止一直很好！

然后，我使用标签的样式来制作我自己的复选标记样式。它工作正常！

然而，当谈到Internet Explorer时，它只是不起作用:(为什么？

注意：

编写所有代码的不是我，我只需要使复选框工作，剩下的就是原样。

编辑：

我似乎找不到合适的解决方案，所以也许我必须有一个完全不同的设计才能使用Internet Explorer？

我的代码：

.specialCheck2 font {
    font-size: 15px;
    font-family: "Verdana";
}

.specialCheck2 {
    position: relative;
}

.specialCheck2 label {
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 2px;
    left: 0;
    background: #fff;
    border: 1px solid #757575;
    font-size: 79%;
}

.specialCheck2 label:after {
    opacity: 0;
    content: 'x';
    position: absolute;
    color: #00035a;
    background: #00035a;
    width: 75%;
    height: 75%;
    text-align: center;
    font-size: 1;
    line-height: 10px;
    margin: 14%;
}

.specialCheck2 label:hover::after {
    opacity: 0.5;
}

.specialCheck2 input[type=checkbox]:checked + label::after {
    opacity: 1;
}

.specialCheck2 input[type=checkbox] {
        margin: 0 5px 0 4px;
}

<div class="specialCheck2">
     <font>
         <input type="checkbox" name="Tilmelding" id="newsletterCheckbox2">JA TAK! Send mig kursuskatalog og kalender
         <label for="newsletterCheckbox2"></label>
     </font>
</div>

Answer 1

这个答案不会告诉您如何修复Internet Explorer的代码，但这可以解释原因。

所有现代网络浏览器，例如Firefox和Chrome，都使用名为WebKit的内容。 WebKit是Apple，Adobe和KDE创建的预构建渲染引擎。你可能已经猜到了，Internet Explorer并没有使用它;微软很顽固并且使用它自己的。在编写影响所有Web浏览器的CSS时，您将不得不考虑这样的事情，并为不同的浏览器重写一些CSS。

它在Internet Explorer 9和Internet Explorer 10中工作的原因是因为它们可能从WebKit中取出了一些组件，或者看到了WebKit正在制作的常见CSS命令，并决定“采用”这些命令并将它们放入进入他们的浏览器。

希望随着Edge的发布，Internet Explorer将会消亡，此类问题将不再发生。但与此同时，MSDN（Microsoft开发网络）在Internet Explorer中有一个专门用于CSS兼容性的页面， CSS Compatibility in Internet Explorer 。

我希望这能解答您为何无法在早期版本的Internet Explorer及其过时的Web浏览器中运行的问题。我甚至在Netscape看到有人询问CSS：/。

编辑： 并且您的::after命令在Internet Explorer 8及之前无效。

Source