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

Question

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

JSFiddle

Chrome和Firefox

Edge和IE

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

 .star-rating {overflow: hidden;}

在符合标准的浏览器（例如Chrome和Firefox等真实浏览器）下，只需.star-rating::after即可。不幸的是，M $浏览器是垃圾。

检查开发人员工具中的样式，您会发现所有伪元素::before和::after都已被删除。这是IE感染的众多错误之一。以下是症状：

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

  

问题：在OP的特定情况下，伪元素：.star-rating::after属性：overflow: hidden被忽略，因为IE需要父代：.star-rating拥有它。   

<小时/>   解决方法：将overflow: hidden应用于.star-rating

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将white-space:nowrap添加到.star-rating::before, .star-rating::after规则。

＆＃13;

＆＃13;

.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;
  white-space:nowrap;
}
.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;