Question

我的网页位于宽度为960像素的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

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

Answer 2

（最常见）问题是您的背景图像有一个奇数，而您的容器是偶数。我用最好的英文写了一篇文章，在那里我还解释了浏览器如何定位你的图片：check it out here。

Answer 3

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

设置填充：0px 0px 0px 1px;解决了IE的问题。

Carlo Capocasa，Travian Games

Answer 4

我能够用jQuery解决这个问题：

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

Answer 5

我遇到了同样的问题。

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

让我知道它是否适合你。

Answer 6

如何使用相同的背景图像创建包装器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; }

包装器有一个偶数，背景将在任何屏幕尺寸上保持相同的位置。

居中的背景图像被1px关闭

6 个答案: