复选框样式在 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 Development Network）在 Internet Explorer 中有一个专门介绍 CSS 兼容性的页面，CSS Compatibility in Internet Explorer。

我希望这能回答您关于为什么它无法在早期版本的 Internet Explorer 及其过时的网络浏览器中运行的问题。我什至看到有人在 Netscape 中询问 CSS ：/。

编辑： 而且您的::after 命令在Internet Explorer 8 及之前的版本中不起作用。

Source