CSS背景圖像中心是不一樣的保證金：0自動帶滾動條

看一看http://jsfiddle.net/7zb6P/1/CSS背景圖像中心是不一樣的保證金：0自動帶滾動條

無論是黃色盒和背景圖像中的滾動div居中，雖然它們的中心稍有不同。這似乎背景爲中心，以整個區域（包括滾動條）是由於，但div爲中心的內容區域（不包括滾動條） - 看到它正確地居中沒有滾動條http://jsfiddle.net/7zb6P/2/

有趣的是IE7使得它「正確」，但IE8 +和其他瀏覽器如上所述呈現它。

我已經玩過背景源（和-webkit-background-origin），但沒有一個屬性看起來有什麼影響。

關於如何解決這個問題的任何想法？

編輯：更多信息：鏈接的小提琴只是一個問題的最小例子，我的實際問題是以整個網站爲中心（使用margin:0 auto）並且背景圖像居中（使用background-position: center top）。該解決方案需要在大量不能更改HTML的網站上工作，因此它需要基於CSS（或可能基於Javascript）的解決方案。謝謝。

來源

2011-05-31 Adam Heath

檢查此http://jsfiddle.net/leobeckons/7zb6P/3/ – Max 2011-05-31 09:39:00

謝謝Max，可悲的是，這並沒有解決問題。由於我連接的小提琴只是一個演示，真正的問題是在身體元素，當它與背景圖像居中。我無法修改網站的HTML（所以要放置一個包裝器或任何東西），所以這個解決方案必須單獨使用CSS（或可能使用Javascript）。 – 2011-06-01 01:50:54

該問題與您的背景圖像有關。你正試圖將一個圖像（爲了CSS的目的）放在沒有中心的位置。

圖像寬321像素。這意味着圖像的中心是161.5像素。由於瀏覽器無法渲染該位置，因此它會獲得1像素的偏移量。

來源

2011-05-31 10:05:07 Damien

你好，雖然這是真的，但它不是根本問題。背景圖片的偏移量大於1px，大約偏離10px。 – 2011-06-01 01:48:20

啊..好的。我沒有注意到。對於那個很抱歉。 – Damien 2011-06-01 07:19:23

CSS背景圖像中心是不一樣的保證金：0自動帶滾動條

回答

相關問題