DIV背景图片在Firefox下不显示的问题
昨天把一个网站的页面底部改成3个纵列(DIV),并且加入背景图片。可是改好后,在Firefox下却无法正确显示背景图片。代码是这样的:
1.HTML(样本):
2. CSS:<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>
#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 条评论:
发表评论
指向此帖子的链接: