不一致CSS背景重复计数

-1

我使用的重复图案作为一个div的背景图像：不一致CSS背景重复计数

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

test_pattern.png是25个像素宽，所以希望它重复8时间在200像素宽的div。这正是我在Safari上获得的。但是，铬重复模式略多于8次。更奇怪的是，当我拍摄chrome页面的快照时，发现div的宽度是220像素，而不是200！无论如何要在所有浏览器上保持一致？

2017-08-02 Jarir

可能值得尝试[rems或vh]（https://snook.ca/archives/html_and_css/vm-vh-units）而不是像素，但我无法回答它为什么呈现不同的原因。 –

在元素上应用填充有点可能，浏览器以不同的方式布置盒子。也许可以尝试添加'box-sizing：border-box;'这应该使浏览器以相同的方式布局填充（以防与问题有关）。 – JakeParis

vh不能解决这个问题。雷姆改善，但没有解决它（重复计数更接近，但不完全相同）。添加框大小和填充不起作用。 – Jarir

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

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

2017-08-02 21:17:46 Jarir

这是一个有趣的结果。我在想你可以创建一个解决方法。应该可以用css的'linear-gradient'来复制你的特定背景。或者，也许可以使用背景图片而不使用repeat-x并使用'background-size：100％auto'？ – RMo

实际设置'background-size：12.5％auto'。并保持你的代码，因为它:)。 – RMo

感谢RMo，这些建议的工作。然而，我提供的例子只是一个简单的测试。最终产品使用更复杂的图像模式和动画div宽度。 – Jarir

回答