使用Font Awesome的星级评分在Edge和IE上无法正常工作

Question

使用下面提供的宽度定义的Font Awesome的星级评级在Chrome和Firefox上工作正常,但在Edge和IE上没有.任何人都知道它会是什么？

的jsfiddle

Chrome和Firefox

Edge和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>

Answer 1

这是M$浏览器在处理伪元素时存在的一个bug。解决方法是：

 .star-rating {overflow: hidden;}

在设计为符合标准的浏览器（即真正的浏览器，如 Chrome 和 Firefox）下，拥有就.star-rating::after足够了。不幸的是，M$ 浏览器都是垃圾。

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

• 开发者工具已将所有伪元素样式划掉
• 尽管根据开发人员工具，这些样式看起来像是被禁用的，但大多数样式都没有。
• 如果存在仅 IE 和/或 Edge 特有的行为，则该错误的次要副作用已经显现。当父元素本身不隐式具有属性时，有些样式属性在应用于伪元素时会被忽略。

问题：在OP的特定情况下，伪元素：.star-rating::afterproperty：overflow: hidden被忽略，因为IE需要parent：.star-rating也有它。

解决方法：适用overflow: hidden于.star-rating

演示（在 Chrome、Firefox 和 IE 中测试）

 .star-rating {overflow: hidden;}

.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%;
}