不同浏览器上的 CSS 背景重复计数不一致答案

【问题标题】：Inconsistent CSS background-repeat count on different browsers不同浏览器上的 CSS 背景重复计数不一致
【发布时间】：2017-08-02 18:16:26
【问题描述】：

我正在使用重复模式作为 div 的背景图像：

<div style="width:200px; height:100px; background-image:url('test_pattern.png'); background-repeat:repeat-x;"></div>

test_pattern.png 是 25 像素宽，所以我希望它在 200 像素宽的 div 中重复 8 次。这正是我在 Safari 上得到的。但是，铬重复该图案的次数略多于 8 次。更奇怪的是，当我拍摄 chrome 页面的快照时，原来 div 的宽度是 220 像素，而不是 200！有没有办法让所有浏览器都保持一致？

【问题讨论】：

可能值得尝试rems or vh而不是像素，但我无法回答为什么它的渲染方式不同。
元素有可能应用了填充，并且浏览器对框的布局不同。也许尝试添加box-sizing: border-box;，这应该使浏览器以相同的方式布局填充（以防万一与问题有关）。
vh 不能解决这个问题。 rem 改进了，但没有修复它（重复计数更接近，但不完全相同）。添加 box-sizing 和 padding 无效。
您是否包含了 CSS 重置样式表？
我刚刚添加了一个 css 重置，但这并没有什么不同。我不认为问题出在 CSS 上。更有可能是浏览器处理屏幕分辨率、图像分辨率、dpi 等的方式。

标签： html css browser background-image background-repeat

【解决方案1】：

我发现了问题。 Chrome 的网页放大了 110%。通过将其重置为 100%，Safari 和 Chrome 都会以相同的方式呈现 div。

奇怪的是，当我缩放 Safari 网页时，背景图案继续准确地重复 8 次。 Chrome 没有！

【讨论】：

这是一个有趣的结果。我在想你可以创建一个解决方法。应该可以使用 css 的linear-gradient 复制您的特定背景。或者也许制作一个不使用 repeat-x 的背景图像并使用 background-size: 100% auto?
实际设置为background-size: 12.5% auto。并保持您的代码原样:)。
感谢 RMo，这些建议有效。但是，我提供的示例只是一个简单的测试。最终产品使用更复杂的图像模式和动画 div 宽度。