3

我的网页位于一个 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中。

有人知道解决方法吗？

4

6 回答 6

3

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

于 2008-09-22T05:08:00.313 回答
2

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

于 2008-10-24T15:34:04.100 回答
2

我发现通过在奇数像素宽上制作背景图像，Firefox 的问题就消失了。

设置填充：0px 0px 0px 1px；修复了 IE 的问题。

卡洛卡波卡萨，Travian Games

于 2009-10-09T15:52:06.897 回答
1

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

$(document).ready(function(){
 $('body').css({
  'margin-left': $(document).width()%2
 });
});
于 2011-01-20T13:06:09.463 回答
0

我有同样的问题。

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

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

于 2012-05-23T18:09:14.527 回答
0

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

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

于 2013-06-22T19:18:26.820 回答