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

我使用重复模式作为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次。这正是我在狩猎中得到的。但是，chrome会将图案重复8次以上。更奇怪的是，当我拍摄chrome页面的快照时，发现div的宽度是220像素，而不是200像素！在所有浏览器上都有一致性吗

---

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

---

奇怪的是，当我缩放Safari网页时，背景图案会继续重复整整8次。铬不会

可能值得一试，而不是像素，尽管我无法回答为什么它呈现出不同的效果。有一点可能是元素中应用了填充，浏览器的布局也不同。也许可以尝试添加

框大小：边框框这应该使浏览器以相同的方式布局填充（以防万一这与问题有关）。vh无法解决此问题。rem改进了，但没有修复（重复次数更接近，但不完全相同）。添加框大小和填充没有任何效果。是否包含css重置样式表？我刚刚添加了css重置，但这没有任何区别。我认为问题不在于CSS。更可能是浏览器处理屏幕分辨率、图像分辨率、dpi等的方式。这是一个有趣的结果。我在想你可以创造一个解决办法。应该可以使用css的
线性渐变
复制您的特定背景。或者可以制作一个不重复x的背景图像，并使用
背景大小：100%自动
？实际设置
背景大小：12.5%自动
。并保持代码不变：）。谢谢RMo，这些建议很有效。然而，我提供的示例只是一个简单的测试。最终产品使用更复杂的图像模式和动画div宽度。