5 星和金色 5 星不在一起（使用 Internet Explorer 浏览时）
Posted
技术标签:
【中文标题】5 星和金色 5 星不在一起（使用 Internet Explorer 浏览时）【英文标题】：5 stars and the golden 5 stars are not together (When browsing with Internet explorer) 【发布时间】：2018-07-23 14:48:24 【问题描述】：这是我的网页链接https://tzipor.com/short-stories
这些是谷歌浏览器和 Internet Explorer 视图的屏幕截图。
Google Browser View Internet Explorer View在 IE 中，星级无法正确显示。我在我的应用程序中使用 laravel。这是创建该星级的代码：
@section('css')
<style>
.star-rating, .back-stars, .front-stars
display: flex;
.starNovelCat .star-rating
display: inline-block;
.star-rating
align-items: center;
font-size: 1em;
/* justify-content: center;*/
/*margin-top: 50px;*/
.back-stars
position: relative;
.type3 .back-stars
text-shadow: 4px 4px 10px #843a3a;
.back-stars
color: #333;
.front-stars
color: #c3912e;
.type3 .back-stars
color: #bb5252;
.type3 .front-stars
color: green;
.front-stars
overflow: hidden;
position: absolute;
top: 0;
.type3 .front-stars
text-shadow: 2px 2px 5px #d29b09;
</style>
@endsection
@if(Healper::averageRatingByStory($story->id) != false)
@php($storyAverageRating = Healper::averageRatingByStory($story->id))
@php($star = ($storyAverageRating/100)*5)
<div class="star-rating" title="round($star,2)">
<div class="back-stars">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<div class="front-stars" style="width: $storyAverageRating%">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
</div>
@endif
【问题讨论】：
次要细节，但您的页面左上角，横幅上方似乎有一个流浪的;。
Something in my web site or project doesn't work. Can I just paste a link to it?
@deceze 有趣的是（对我来说）如果 ; 实际上在 <!DOCTYPE html> 之前导致 IE 使用兼容模式并因此导致中断：D
如果我的问题不恰当或没有太多解释，我很抱歉。如果有人需要更多信息，可以问我。
如果您需要帮助，您需要在问题中解释问题是什么，用代码。另见help center和特别是创建minimal reproducible example 的指南。
【参考方案1】：
将left:0; 属性添加到.front-stars 类并试一试。
希望这有效..
【讨论】：
以上是关于5 星和金色 5 星不在一起（使用 Internet Explorer 浏览时）的主要内容，如果未能解决你的问题，请参考以下文章
路径规划基于A星和改进A星求解节点间的路径规划问题matlab源码