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

【问题标题】：Internet Explorer 'input:checked + label:before' styling is not renderedInternet Explorer 'input:checked + label:before' 样式未呈现
【发布时间】：2016-11-22 11:52:39
【问题描述】：

我在为我的自定义复选框设置 :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

【问题讨论】：

什么是IE版本？
问题中的图片是IE11，但是IE10也出现了问题！
最好的办法是创建一个可运行的 HTML sn-p，我们可以在其中检查问题
@JuanMendes 我已经用 Codepen 演示更新了这个问题。
您的 codepen 在 IE11 中为我工作（我看到绿色复选标记）。

标签： css internet-explorer checkbox css-selectors pseudo-element

【解决方案1】：

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

这里的重点是：我们应该在 'label' 元素上使用 'for' 属性，以便它链接到相应的 'input' 元素。

这也适用于 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>

【讨论】：

【解决方案2】：

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

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

正如假定的重复问题中所述，适当的修复方法是使用其他一些 display 类型作为伪元素，同时对 width 和 height 样式进行任何必要的调整。

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

感谢任何帮助过的人。

【讨论】：