Internet Explorer 'input:checked + label:before' 样式未呈现

Question

我在为我的自定义复选框设置 :checked 样式以在 Internet Explorer 中显示时遇到一些问题。

它们在 Chrome 中工作得很好。

...但在 IE 中

这是相关样式

input[type="radio"], input[type="checkbox"] {
    opacity: 1;
    position: absolute;
    top: -9999;

    & + label {
        vertical-align: middle;
    }
}

input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
    content: '\f3fd';
    font-family: 'Ionicons';
    width: 26px;
    height: 20px;
    border: 2px solid #45555F;
    font-size: 24px;
    color: transparent;
    display: table-cell;
    text-align: center;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    padding: 0 2px;
}

input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
    content: '\f383';
    font-family: 'Ionicons';
    font-size: 24px;
    width: 26px;
    height: 20px;
    text-align: center;
    display: table-cell;
    padding: 0 2px;
    border: 2px solid #45555F;
    color: #8ec549;
}

input[type="radio"] + label:before {
    border-radius: 50% !important;
}

我还注意到 Internet Explorer 只是在加载时删除了样式...

感谢您的帮助！

编辑：Codepen 演示（该演示在 IE 中也不起作用）

http://codepen.io/anon/pen/rLJqyK

Answer 1

与在选中时修改 :before 伪元素相反，我只是将 :after 伪元素用于活动状态，并在不透明度之间轻弹以相应地隐藏和显示它们。

感谢所有提供帮助的人。

Answer 2

它看起来像的副本。

简而言之，有一个 bug in IE10 and 11，其中 font 样式对于具有 table-cell 显示的伪元素被忽略。

如假定的重复问题中所述，适当的解决方法是对伪元素使用其他一些 display 类型，并结合对 width 和 [=14= 的任何必要调整] 风格。

Answer 3

您遇到的问题是一个已知的 IE10 - IE11 错误，这两个浏览器倾向于 完全忽略伪元素中的字体声明display: table-cell。这意味着属性为 font、font-size、font-family, color等都会被击中

要绕过这个错误，在您的情况下就足够了：

▶ 将 display: table-cell 与实际元素而不是伪元素一起使用，或者

▶ 将 display: table-cell 更改为 display: inline-block 或其他一些 non-table-cell 伪元素的值。

▶ 声明一个 float 属性的值不是 none 所以它变成 display: table-cell 到 display: block.

以下是一些与 display: table-cell 相关的问题，可能对您有帮助：

▶ IE not coloring :before as table-cell, why?

▶ Positioning of div inside display:table-cell in IE 10

▶ Display table-cell on pseudo element in IE11

Answer 4

试试另一种方法，我通常使用下面格式化的方法。

The important point here is: we should use 'for' attribute on the 'label' element so that it is linked to the corresponding 'input' element.

这也适用于 IE。

input[type="checkbox"] {
  display: none;
}
label {
  padding-left: 25px;
  position: relative;
  cursor: pointer;
}
label::before {
 content: "";
 width: 16px;
 height: 16px;
 border: 1px solid #aaa;
 display: block;
 position: absolute;
 left: 0;
 top: 0;
}
label p {
  display: inline-block;
}
label input[type="checkbox"]:checked + p::after {
 content: "";
 display: block;
 position: absolute;
 width: 10px;
 height: 5px;
 border-left: 2px solid;
 border-bottom: 2px solid;
 transform: rotate(-45deg);
 left: 3px;
 top: 4px;
 color: #3da5c3;
}

<label for="testInput">
  <input type="checkbox" name="test" id="testInput" value=1 />
  <p>Test Checkbox</p>
</label>

Internet Explorer 'input:checked + label:before' 样式未呈现

Internet Explorer 'input:checked + label:before' styling is not rendered

css

checkbox

internet-explorer

css-selectors

pseudo-element