DIV背景图片在Firefox下不显示,IE下正常

最新推荐文章于 2021-06-04 22:42:39 发布

weixin_30314793

最新推荐文章于 2021-06-04 22:42:39 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yiwd/archive/2009/12/29/1635041.html

本文介绍了一个关于在Firefox浏览器中，当子元素使用float布局时，父元素背景图片无法正常显示的问题及解决方案。通过给父元素添加overflow:auto样式，可以确保背景图片在Firefox中的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在一个大的div里有2个横列(DIV)，并且在大的div里加入背景图片。可是改好后，在Firefox下却无法正确显示背景图片。代码是这样的：

1.HTML(样本)：

<div id="footer">
  <div id="footer_left">Content1</div>
  <div id="footer_right">Content2</div>
</div>

2. CSS:
#footer {
  width:730px; 
  background-image: url(../images/bg.jpg);
  background-repeat: repeat-y;
}
#footer_left {
  float:left; 
  width:230px; 
}
#footer_right{
  float:left; 
  width:500px; 
}

解决方法：

这是因为你的#footer_left 和#footer_right加了float:left，在FF里如果里面的元素加了float:left（right),它就不会被撑开的，也就是说的它的高度是0，如果正常显示，必须加上：overflow:auto,即：#footer {

width:730px; 
background-image: url(../images/bg.jpg); 
background-repeat: repeat-y; 
overflow:auto；
}

转载于:https://www.cnblogs.com/yiwd/archive/2009/12/29/1635041.html