有效的 CSS 在 Internet Explorer 11 中不起作用答案

【问题标题】：Valid CSS not working in Internet Explorer 11有效的 CSS 在 Internet Explorer 11 中不起作用
【发布时间】：2015-01-13 16:34:50
【问题描述】：

作为 CSS 和 HTML5 的相对新手，我一直在使用我在 Bootstrap checkbox replacement 找到的 CSS 文件来显示字体很棒的复选框和单选按钮。它在 Chrome 中可以正常工作，但在 Internet Explorer 中却不行，即使 W3C 验证器显示它是有效的。

有没有人知道什么是错的？

/* CSS used here will be applied after bootstrap.css */

.demo {
  padding:50px;
}

.demo label{
   top:3px; left:15px;
   margin-right:30px;     
   position:relative;     
}  


input.faChkRnd, input.faChkSqr {
   visibility: hidden;
}

input.faChkRnd:checked:after, input.faChkRnd:after,
input.faChkSqr:checked:after, input.faChkSqr:after {
   visibility: visible;
   font-family: FontAwesome;
   font-size:25px;height: 17px; width: 17px;
   position: relative;
   top: -3px;
   left: 0px;
   background-color:#FFF;
   display: inline-block;
}

input.faChkRnd:checked:after {
   content: '\f058';
}

input.faChkRnd:after {
   content: '\f10c';
}

input.faChkSqr:checked:after {
   content: '\f14a';
}

input.faChkSqr:after {
   content: '\f096';
}

已编辑

所以澄清一下，如果您在 Chrome 中打开 http://www.bootply.com/H289A4AIGZ#，复选框会正确显示，但当您在 IE11 中打开时，它们根本不会出现 - 无论 CSS 是否有效。

【问题讨论】：

什么不起作用？您希望看到什么？它会显示什么？
仅仅因为 CSS 在某些验证器中显示为有效并不意味着它会在所有浏览器中呈现您想要的方式。每个浏览器处理某些样式元素的方式与其他浏览器略有不同。这就是为什么我们有单独的规则指示器来表示浏览器/渲染器类型的特殊样式指令。
我第一次投反对票！我的问题有问题吗？
是的，有一个问题 - 问题没有具体说明，究竟是什么问题。 “工作正常”与“不工作” - 哪些部分有问题？有什么问题？
用问题中包含的代码来解释问题，而不是“如果你打开...”（一些实时 URL）。

标签： html css twitter-bootstrap internet-explorer

【解决方案1】：

我以前也遇到过这个问题，如果我没记错的话，IE 会隐藏:before 伪元素以及复选框，或者只是不支持复选框上的:before。

我做得最好的在这里：http://jsfiddle.net/rally25rs/MRa2H/

第 3 个（黑色）复选框在 IE 中有效，但其他 2 个无效。它通过使用兄弟选择器来决定显示哪个图标来工作。

.works-in-ie input[type="checkbox"]:checked ~ .checked
{
    display: inline-block;
}
.works-in-ie input[type="checkbox"]:checked ~ .unchecked
{
    display: none;
}
.works-in-ie input[type="checkbox"] ~ .checked
{
    display: none;
}
.works-in-ie input[type="checkbox"] ~ .unchecked
{
    display: inline-block;
}

.works-in-ie input[type="checkbox"] {
    display: none;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="works-in-ie">
<label><input type="checkbox"/><i class="fa fa-arrow-down unchecked"></i><i class="fa fa-arrow-up checked"></i> Click Me</label>
</div>

这是这个答案的截图和在 IE11 中工作的代码 sn-p：

【讨论】：

是的，::before/::after 在 IE 中似乎根本无法处理复选框...jsfiddle.net/Ld70fb0q/1
IE 中的开发工具在 CSS 上添加了删除线，但似乎没有给出原因，所以是的，我的猜测是它们不受支持。
相关问题：stackoverflow.com/questions/12831620/…
谢谢，但这些复选框都不适用于 IE11 / Win10 :(
@mliqu 如果 IE11 中此答案中的代码 sn-p ，我添加了一个屏幕截图。它似乎工作正常。 (IE11/Win10/SurfacePro3)