CSS背景图像中心与边距不同:0自动使用滚动条

Question

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

黄色方框和背景图像都在滚动的div中居中，尽管它们的中心略有不同。这似乎是因为背景居中于整个区域(包括滚动条)，但div居中于内容区域(不包括滚动条)-请在没有滚动条http://jsfiddle.net/7zb6P/2/的情况下正确地将其居中

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

我已经尝试过使用background-origin (和-webkit-background-origin)，但是这些属性似乎都没有任何效果。

对如何解决这个问题有什么想法吗？

编辑:更多信息:链接的小提琴只是这个问题的一个最小的例子，我的实际问题是整个网站的中心(使用margin:0 auto)和背景图像居中(使用background-position: center top)。该解决方案需要在大量的网站上工作，我不能改变的HTML，所以它需要是一个基于CSS的(或可能基于Javascript的)解决方案。谢谢。

Answer 1

问题出在你的背景图片上。您正在尝试居中一个没有居中的图像(对于CSS的目的)。

图像的宽度为321像素。这意味着图像的中心是161.5像素。由于浏览器无法渲染该位置，因此得到1像素的偏移量。