firefox下背景图片居中错位的CSS方案

hanbal — Sun, 05 Oct 2008 09:40:32 +0000

我的博客的现在这个主题（bluesky），曾经有很多问题、不足、bug（原作者是个印度人，做事也太糙了点），目前已经修整的差不多，但就剩一个，怎么也搞不定，是什么呢？我先叙述再贴图：在IE下显示正常，不管把窗口怎么缩小，网页的样式都不会发生变化，同时因为网页的宽度是固定的，所以当窗口缩小到一定成都就会产生水平滚动条；在ff下显示也算正常，但就是不能把窗口缩小，一旦缩小到一定程度，背景图片就会水平错开，具体如下图所示，背景向左侧移动以至于文字显示在背景之外。

如下所示，是style.css初始的body属性，在这个属性下，出现了上述问题。

   1:  body {

   2:      width:942px;

   3:      background: #eee url(img/containerbg.gif) repeat-y center;

   4:      margin:0 auto;

   5:      padding: 0;

   6:      }

修整方法得到CSSBBS论坛上一位热心网友的鼎力相助，style.css修改方法如下：

   1:  body {

   2:      width:942px;

   3:      background: #eee;

   4:      margin:0 auto;

   5:      padding: 0;

   6:      }

7:

   8:  #center{

   9:      width:942px;

  10:      background: url(img/containerbg.gif) repeat-y center;

  11:      margin: 0 auto;

  12:      height:auto;/*高可以给固定值或自动,根据需求*/

  13:      }

然后在theme中header.php之body标记开始之后和footer.php之body标记结束之前分别添加如下1、2两个代码：

   1:  "center">

2:

ok！不论在什么浏览器下显示都正常了，在firefox下居中是要多一个div的。另外，在live writer中写日志时，不论窗口多大都显示正常（之前有点小小的不正常，也是水平错位）。在此向这位网友表示感谢。现在这个主题基本算是修理的差不多了。

您可能对以下日志感兴趣

Imdoc.Net » 居中

firefox下背景图片居中错位的CSS方案