html - CSS 背景图片中心与边距不一样 :0 auto with scrollbars

Question

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

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

有趣的是，IE7 可以“正确”呈现它，但 IE8+ 和其他浏览器会按上述方式呈现它。

我玩过 background-origin(和 -webkit-background-origin)，但似乎没有任何属性有任何影响。

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

编辑:更多信息:链接的 fiddle 只是问题的一个最小示例，我的实际问题是整个站点居中(margin:0 auto)并且有背景图片居中(使用 background-position: center top)。该解决方案需要在我无法更改 HTML 的大量站点上运行，因此它需要是基于 CSS(或可能基于 Javascript)的解决方案。谢谢。

Answer 1

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

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