Internet Explorer的输入：已选中+标签：在未渲染样式之前

Question

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

他们在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

相对于在检查我简单地使用的:after伪元件为活动状态和轻拂修改:before伪元件在不透明之间隐藏并相应地显示它们。

感谢任何帮助过的人。

Answer 2

它看起来像是In IE11 using pseudo element ::before and display:table-cell and glyphicons contens wont show up的副本。

总之，有一个bug in IE10 and 11font样式被忽略的虚拟元素table-cell显示。

如假定重复的问题提到的，适当的解决将是结合使用一些其他display类型伪元素与您width和height风格进行必要的调整。

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 value for你的伪元素。

▶声明其具有比none以使其变为display: table-cell到display: block其他的值的float属性。

---

下面是一些面对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