【问题标题】：Star rating using Font Awesome doesn't work properly on Edge and IE使用 Font Awesome 的星级评分在 Edge 和 IE 上无法正常工作
【发布时间】：2017-12-11 03:19:36
【问题描述】：
使用下面提供的由宽度定义的 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>
【问题讨论】：
标签：
html
css
font-awesome
【解决方案1】：
将white-space:nowrap 添加到.star-rating::before, .star-rating::after 规则中。
.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%;
}
<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>
【解决方案2】：
这是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 中测试）
.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>