网站开发日志

2008年10月9日星期四

分享家:Addthis中国

DIV背景图片在Firefox下不显示的问题

昨天把一个网站的页面底部改成3个纵列(DIV),并且加入背景图片。可是改好后,在Firefox下却无法正确显示背景图片。代码是这样的:

1.HTML(样本):

<div id="footer">
  <div id="footer_left">
    <img src="/images/new/footer-logo.gif" border="0" />
  </div>
  <div id="footer-center">
    <ul><h3>SubDiv1</h3>
      <li><a href="#">Package Tracking</a></li>
      <li><a href="#">Purchase Order</a></li>
    </ul>
    <ul><h3>SubDiv2</h3>
      <li><a href="#">Help and Info</a></li>
      <li><a href="#">Bids, Contracts, GSA</a></li>
    </ul>
    <ul><h3>SubDiv3</h3>
      <li><a href="/about/">100% Guarantee</a></li>
      <li><a href="/contact/">Privacy and Security</a></li>
    </ul>
  </div>
  <div id="footer_right">Content3</div>
</div>
2. CSS:
#footer {
  width:984px; 
  height:128px; //开始背景图片不显示的原因是少了这行对高的定义
  margin:0 auto; 
  background: url(/images/new/footer-bg.gif) 0 0px repeat-x;
}
#footer_left {
  float:left; 
  margin:0; 
  width:230px; 
  padding: 0px 16px;
}
#footer-center {
  float:left; 
  margin: 10px 0px; 
  width:500px; 
  text-align:center;
}
#footer_right{
  float:right; 
  margin:0; 
  width:170px; 
  padding: 15px 16px;
}

注释:我在主分区(div #footer)里定义了背景图如下:

background: url(/images/new/footer-bg.gif) 0 0px repeat-x;

背景图footer-bg.gif的大小是1x128px,横向重复(repeat-x)。语法完全正确。但是开始的时候,在Firefox下却无法正确显示背景, 只有第一个分区(#footer-left)的背景有填充,别的两个分区背景都没有得到填充。虽然在IE7/IE6下显示是正常的,但是个人认为Firefox通常是最遵循标准的。如果在Firefox下显示有误的话,我想一定是代码在某个地方没有按照标准来了。最后终于找到了原因。原来是我在主分区(#footer)的CSS里漏定义了div的高度,开始认为,如果不定义这个高度,div会根据其内部的内容来调整div的高度并且自动填充背景。结果不是这样的!

标签: ,

相关文章:

0 条评论:

发表评论

指向此帖子的链接: