CSS背景图像中心与margin不同：0 auto with scrollbars

Question

查看http://jsfiddle.net/7zb6P/1/

黄色方框和背景图像都在滚动div中居中，尽管它们的中心略有不同。这似乎是由于背景以整个区域为中心（包括滚动条），但div以内容区域为中心（不包括滚动条） - 看到它正确居中而没有滚动条http://jsfiddle.net/7zb6P/2/

有趣的是IE7“正确”地呈现它，但IE8 +和其他浏览器如上所述呈现它。

我玩过background-origin（和-webkit-background-origin）但没有一个属性似乎有任何影响。

关于如何解决这个问题的任何想法？

编辑：更多信息：链接的小提琴只是问题的一个最小例子，我的实际问题是整个网站的中心位置（margin:0 auto）并且背景图像居中（使用{{1 }}）。该解决方案需要在大量我无法更改HTML的站点上运行，因此它需要是基于CSS（或可能基于Javascript）的解决方案。感谢。

Answer 1

问题在于您的背景图片。你试图将一个图像居中（为了CSS的目的）没有中心。

图像宽度为321像素。这意味着图像的中心是161.5像素。由于浏览器无法呈现该位置，因此会获得1个像素的偏移。