取決於瀏覽器寬度的居中背景圖像和居中的DIV之間的不對齊

我有一個正方形的背景圖像，其大小與覆蓋此正方形的div大小相同。（這裏沒有提到這是神的原因）。當將這個背景圖片和div對齊時，它們在某些瀏覽器寬度上不會重疊。當重新調整瀏覽器的大小時，有時背景方塊會錯位1個像素。正如你可以在下面的例子和JSFiddle中看到的那樣，拖動瀏覽器寬度時，背景方塊的1個像素有時是可見的。取決於瀏覽器寬度的居中背景圖像和居中的DIV之間的不對齊

有沒有解決方案呢？爲什麼元素之間的定位不同步？

enter image description here

嘗試重新大小的小提琴視口的寬度，你會看到錯位發生時，青色背景方有時是可見的。

的jsfiddle：http://jsfiddle.net/jj3qxL3k/

代碼：

div{ 
     background-color: yellow; 
     width: 800px; 
     margin: 0 auto; 
    } 
    html{ 
     background: url(http://s29.postimg.org/42cuy8m7b/tester.png) center center repeat; 
     margin: 0; 
     padding: 0;  
    } 
    body{ 
     margin: 0; 
     padding: 0; 
    }

enter image description here

<div>CONTENT DIV</div>

CSS試過這種沒有任何的運氣：

/* Fix form centering background input chrome */ 
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
     html { 
      margin-left: 1px; 
     } 
    } 

    @media screen and (-webkit-min-device-pixel-ratio:0) { 
     body { 
      background-position: 50.001% 0; 
     } 
    }

順便說一句...這發生在我的Chrome版本43.0.2357.81米。

來源

2015-06-11 Jesper Wilfing

這將是一個瀏覽器像素四捨五入問題，我敢肯定 –

是的，正如Tanel Eero的帖子中所討論的，這個DIV和Background-image的居中應該以同樣的方式圓整！所以...讓我們聽聽「非JavaScript」，基於CSS的解決方法:) –

這取決於瀏覽器如何處理不均勻的值並對齊背景和內容。

當你的容器有一個奇數的寬度值時，會發生這種情況，因爲你的容器內的元素的寬度值是偶數。例如，如果你的元素寬度爲800px，容器寬度爲855px，那麼你的元素周圍會有855-800 = 55px的空間，現在瀏覽器必須將這個空間分開。它會降低到每邊22.5像素，但由於它不能畫出半個像素，所以不得不四捨五入。所以元素的一邊會得到23px，另一邊是22px。

現在可以認爲背景圖像本身的處理方式是相同的，所以對齊應該是相同的，但事實上，這完全取決於瀏覽器的構建方式，這就是爲什麼您在不同的結果中獲得不同的結果瀏覽器。

在沒有看到實際項目的情況下建議解決方法相當困難，因爲它可能必須是不同的解決方案。

來源

2015-06-11 09:15:12

感謝您的輸入！在邏輯上應該以相同的方式處理背景居中和div居中。然而，這可能更適合在谷歌瀏覽器建議論壇中提出建議（正如您指出其瀏覽器問題）。我會保持這個Q打開...可能有很好的解決方法在那裏... –

取決於瀏覽器寬度的居中背景圖像和居中的DIV之間的不對齊

回答

相關問題