Css Internet Explorer'；输入：选中+；标签：在'之前；不渲染样式

我在获取要在Internet Explorer中显示的自定义复选框的

：选中
样式时遇到一些问题

他们在铬上工作得非常好


。。。但在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中也不起作用）

与修改
：在选中的
伪元素之前，我只是将
：之后的
伪元素用于活动状态，并在不透明度之间切换以相应地隐藏和显示它们

感谢所有帮助过你的人。
它看起来像是一个复制品

简言之，对于具有
表格单元格
显示的伪元素，
字体
样式被忽略

正如在假定的重复问题中提到的，一个合适的修复方法是为伪元素使用一些其他的
显示类型，同时对
宽度
和
高度
样式进行必要的调整。
您面临的问题是一个已知的
IE10-IE11错误，这两个浏览器倾向于完全忽略伪元素中的字体声明，使用
display:table cell。这意味着
font，
字体大小，
字体系列，
颜色等属性都将被删除

要避免此错误，您只需：

▶ 使用带有实际元素而不是伪元素的表单元格，或

▶ 将
显示：表格单元格更改为
显示：内联块或伪元素的其他一些
非表格单元格值

▶ 声明一个
属性，该属性的值不是
，以便它将
显示：表格单元格转换为
显示：块


以下是一些与显示：表格单元格相关的问题，这些问题可能会有所帮助：

▶ 

▶ 

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

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

这也适用于IE


input[type=“checkbox”]{
显示：无；
}
标签{
左侧填充：25px；
位置：相对位置；
光标：指针；
}
标签：：之前{
内容：“；
宽度：16px；
高度：16px；
边框：1px实心#aaa；
显示：块；
位置：绝对位置；
左：0；
排名：0；
}
标签p{
显示：内联块；
}
标签输入[type=“checkbox”]：选中+p:：之后{
内容：“；
显示：块；
位置：绝对位置；
宽度：10px；
高度：5px；
左边框：2倍实心；
边框底部：2倍实心；
变换：旋转（-45度）；
左：3px；
顶部：4px；
颜色：#3da5c3；
}

测试复选框

什么是IE版本？问题中的图像是IE11，但问题也发生在IE10上！最好的办法是创建一个可运行的HTML代码段，我们可以在其中检查problem@JuanMendes我用代码笔演示更新了这个问题。你的代码笔在IE11中为我工作（我看到绿色的复选标记）。