html - 在Edge和IE上使用Font Awesome进行星级评定无法正常工作

下面提供的使用由字体定义的Font Awesome进行星级评定的宽度在Chrome和Firefox上可以正常工作，但在Edge和IE上却不能。有人知道会是什么吗？

JSFiddle

Chrome和Firefox



边缘和IE

.star-rating {
  display: inline-block;
  position: relative;
  line-height: 1;
}
.star-rating:before,
.star-rating:after {
  content: "\f005\f005\f005\f005\f005";
  display: block;
  font-family: "FontAwesome";
  font-size: 25px;
  color: #ccc;
}
.star-rating:after {
  color: gold;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.star-rating.s0:after {
  width: 0%;
}
.star-rating.s1:after {
  width: 10%;
}
.star-rating.s2:after {
  width: 20%;
}
.star-rating.s3:after {
  width: 30%;
}
.star-rating.s4:after {
  width: 40%;
}
.star-rating.s5:after {
  width: 50%;
}
.star-rating.s6:after {
  width: 60%;
}
.star-rating.s7:after {
  width: 70%;
}
.star-rating.s8:after {
  width: 80%;
}
.star-rating.s9:after {
  width: 90%;
}
.star-rating.s10:after {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<span class="star-rating s7"></span>

最佳答案

这是一个bug that the M$ browser has when dealing with pseudo elements。解决方法是:



在设计为符合标准的浏览器(即真正的浏览器，例如Chrome和Firefox)下，仅使用.star-rating::after就足够了。不幸的是，M $浏览器是垃圾。

在开发人员工具中检查样式，您将看到所有伪元素::before和::after被划掉了。这是IE感染的众多错误之一。以下是症状:

开发人员工具将所有伪元素样式都划掉了

尽管样式似乎已被开发人员工具禁用，但大多数样式并未禁用。

如果存在仅IE和/或Edge独有的行为，则表明该错误的次要副作用。当父元素没有隐式拥有属性本身时，将样式属性应用于伪元素时会被忽略。

演示(在Chrome，Firefox和IE中测试)

.star-rating {
  display: inline-block;
  position: relative;
  line-height: 1;
  overflow: hidden;
}
.star-rating:before,
.star-rating:after {
  content: "\f005\f005\f005\f005\f005";
  display: block;
  font-family: "FontAwesome";
  font-size: 25px;
  color: #ccc;
}
.star-rating:after {
  color: gold;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.star-rating.s0:after {
  width: 0%;
}
.star-rating.s1:after {
  width: 10%;
}
.star-rating.s2:after {
  width: 20%;
}
.star-rating.s3:after {
  width: 30%;
}
.star-rating.s4:after {
  width: 40%;
}
.star-rating.s5:after {
  width: 50%;
}
.star-rating.s6:after {
  width: 60%;
}
.star-rating.s7:after {
  width: 70%;
}
.star-rating.s8:after {
  width: 80%;
}
.star-rating.s9:after {
  width: 90%;
}
.star-rating.s10:after {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<span class="star-rating s7"></span>

关于html - 在Edge和IE上使用Font Awesome进行星级评定无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44960386/