居中背景图像偏离 1 像素

Question

我的网页位于 960px 宽的 DIV 中，我使用以下代码将该 DIV 居中于页面中间：

html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}

我需要 html/body 的背景图像平铺到页面中间，确实如此，但是，如果浏览器中的可视窗格的像素宽度为奇数，则居中背景和居中 DIV 不会对齐在一起。

这种事只发生在FF。

有人知道解决方法吗？

Answer 1

（最）常见的问题是背景图像的编号为奇数，而容器的编号为偶数。
我用我最好的英语写了一篇文章，其中还解释了浏览器如何定位您的图片：在这里查看。

Answer 2

我发现通过将背景图像设置为奇数像素宽，Firefox 的问题就消失了。

设置内边距：0px 0px 0px 1px； 修复了 IE 的问题。

卡洛·卡波卡萨，Travian Games

Answer 3

是的，这是已知问题。 不幸的是，您只能修复 div 和图像宽度，或使用脚本动态更改 stye.backgroundPosition 属性。 另一个技巧是将表达式放入 CSS 类定义中。

Answer 4

创建一个具有相同背景图像的包装 div 怎么样？

body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }

包装纸的编号为偶数，背景在任何屏幕尺寸上都将保持相同的位置。

Answer 5

我有同样的问题。

要使背景居中，您需要背景图像比视口更宽。 尝试使用宽度2500px的背景。 它将强制浏览器将可见图像部分居中。

请让我知道这对你有没有用。

Answer 6

我可以用 jQuery 解决这个问题：

$(document).ready(function(){
 $('body').css({
  'margin-left': $(document).width()%2
 });
});