星级评分重叠背景图片仅在Chrome中未对齐

Question

我正在尝试使用评级明星修复Chrome中的显示问题。

我有两个背景图像的div。 这颗恒星是18px宽，所以我已经制作了90px（18x5）的边界。在其中，动态指定另一个div来显示等于评级的填充星。

我在小提琴中设置的示例宽度基于我网站上的一个真实示例。仅在Chrome浏览器中，宽度为90像素的星星不会排列。但是，如果由于某种原因我把它减少到89px，那么星星会排成一行。

我在IE或Firefox中没有看到相同的问题。

如果有解决方案，我更喜欢将宽度保持在90px，因为否则最后一颗星在Firefox和IE中会被略微切断，但我真的很不知道是什么导致了现在不对齐。

为什么明星在Chrome中未对齐？

https://jsfiddle.net/3hs0pnsq/

<style>
    .rating {
        background: url('http://www.solarreviews.com/images/star-18.png') repeat-x 0 0;
        width: 90px;
        height: 18px;
        display: block;
    }
    .rating-star {
        background: url('http://www.solarreviews.com/images/star-18.png') repeat-x 0 -18px;
        height: 18px;
        display: block;
    }
</style>

<div class="rating">
    <div class="rating-star" style="width: 72px;">
    </div>
</div>

<br />

<div class="rating">
    <div class="rating-star" style="width: 84px;">
    </div>
</div>

<br />

<div class="rating" style="width: 89px;">
    <div class="rating-star" style="width: 72px;">
    </div>
</div>

结果：

Answer 1

虽然我的浏览器设置为默认100％，但我的显示设置已经改变，以便将所有文本缩放到125％，这导致了Chrome中的奇怪问题。重置显示器显示设置已解决了我的问题。