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

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

2008-10-05_16-46-37

如下所示,是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:  <div id="center">
   2:  </div>

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

相关日志

本文评论 2 comments

  1. 天涯行客 奋力的盖起一层楼:

    向你学习了,我对CSS不太懂

  2. hanbal 奋力的盖起一层楼:
    CSS还是应该学习一下的,对于网站的美化实在太有帮助。我当初也是自己摸索学了一些,只能算是略懂吧。

Leave a comment

医来伸手

Basic and Clinical Medicine

健康资讯

Health Knowledge and Information

风湿免疫

Rheumatoid and Immune Diseases

学习资源

Learning Resources and Downloads

新闻旧闻

New and Old News

趣闻逸事

Interesting Things and Fun

wordpress

Theme, Plugin and Using…

电脑网络

Powerful Computer and Internet

影音娱乐

Movies, Music, Teleplay…

经典文图

Classic Pictures and Essay

闲谝淡扯

Waffling, Freedom of Speech!

生活记事

Some Stories of Life