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

它看起来像是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和\d样式的任何必要调整结合使用

Answer 3

您遇到的问题是一个已知的 IE10 - IE11 错误，其中这两个浏览器倾向于使用{{1}完全忽略伪元素中的字体声明} 即可。这意味着该属性为 display: table-cell ， font ， font-size ， {{1所有人都会被击中。

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

▶将 font-family 与实际元素而不是伪元素一起使用，或

▶将 color 更改为 display: table-cell 或其他 display: table-cell 值元件。

▶声明 display: inline-block 属性，其值不是 non-table-cell ，以便它变为 float < / strong>至 none 。

以下是一些与 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

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

这里的重点是：我们应该在'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>

Internet Explorer＆＃39;输入：选中+标签：之前＆＃39;样式不会呈现

4 个答案: