不一致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

回答