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

问题描述

作为CSS和HTML5的相对新手，我一直使用在 Bootstrap复选框替换中找到的CSS文件以显示字体真棒复选框和单选按钮.即使W3C验证程序将其显示为有效，它也可以在Chrome中正常运行，但不能在Internet Explorer中运行.

有人有什么想法吗?

/* 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';
}

已编辑

因此，请澄清一下，如果您打开 http://www.bootply.com/H289A4AIGZ#在Chrome中，复选框会正确显示，但是在IE11中将其打开时，无论有效的CSS是什么，它们都不会显示.

解决方案

我之前为此进行过尝试，如果我没记错的话，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中工作的代码段:

As a relative newbie to CSS and HTML5, I have been using a CSS file that I found at Bootstrap checkbox replacement to display font awesome checkboxes and radio buttons. It works fine in Chrome but not in Internet Explorer even though the W3C validator shows it as valid.

Does anyone have any ideas what is wrong?

/* 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';
}

Edited

So just to clarify, if you open up http://www.bootply.com/H289A4AIGZ# in Chrome the checkboxes display correctly but when you open it up in IE11 they do not appear at all - regardless of the valid CSS.

解决方案

I've fought this before, and if I remember correctly, IE hides the :before pseudo element along with the checkbox, or just doesn't support :before on checkboxes.

The best I have done is here: http://jsfiddle.net/rally25rs/MRa2H/

The 3rd (black colored) checkbox works in IE but the other 2 don't.It works by using the sibling selector to decide which icon to show.

.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>

---

Here is a screenshot of this answer and the code snippet working in IE11:

这篇关于有效的CSS在Internet Explorer 11中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！