DIV背景图片在Firefox下不显示,IE…-优快云博客

本文解决了一个在Firefox浏览器中，使用CSS设置的背景图片无法在包含浮动元素的div内正确显示的问题。通过在父div的CSS中添加overflow:auto属性，使得内部浮动元素的高度能够被撑开，从而解决背景图片显示问题。

在一个大的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; }

此代码是左右两栏排版，利用父DIV(footer)的背景图片做子DIV(footer_left)的背景，来达到左右两栏高度对齐。

解决办法：
这是因为你的#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； }