星级重叠背景图像仅在 Chrome 中未对齐答案

【问题标题】：Star rating overlapping background images misaligned in Chrome only星级重叠背景图像仅在 Chrome 中未对齐
【发布时间】：2017-03-20 09:06:34
【问题描述】：

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

我有两个带有背景图像的 div。星星的宽度为 18 像素，因此我将边界 div 设为 90 像素（18x5）。在其中动态指定另一个 div 以显示与评级等效的填充星。

我在小提琴中列出的示例宽度基于我网站上的一个真实示例。仅在 Chrome 浏览器中，宽度为 90 像素的星星不对齐。但是，如果我出于某种原因将其减小到 89 像素，星星会排成一行。

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

如果有解决方案，我更愿意将宽度保持在 90 像素，因为否则最后一个星在 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>

结果：

【问题讨论】：

它们在 Chrome 版本 54.0.2840.87 m（64 位）/Windows 10 中看起来不错。
这与我使用的版本/操作系统相同。我也检查了浏览器缩放，默认也是 100%。
如果我放大它们确实会错位。
感谢 Ricky，这给了我需要进一步查看实际显示而不是代码的提示。我不知道何时/如何，但我的显示器设置已调整。
没问题！这让我想创建一个评分组件，我使用 SVG spritesheet 和 jQuery 完成了该组件。如果你有兴趣，这里是jsFiddle。如果你愿意，我可以在答案中解释。我相信它比您当前的实现更具语义、更易于维护和可扩展。

标签： html css google-chrome

【解决方案1】：

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

【讨论】：