DIV背景图片在Firefox下不显示通过overflow-auto可解决

在一个宽大的div容器中，你巧妙地设置了两个横向的子div，并赋予了它背景图片，想要实现左右两栏的高度对齐。在Firefox浏览器中，背景图片似乎并不如你所愿地展示。

让我们先来看看你的HTML和CSS代码：

HTML部分：

```html

```

CSS部分：

```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;

}

```

你的设计巧妙且富有创意，然而出现了一个在Firefox浏览器下的问题：由于给footer_left 和 footer_right添加了float属性，导致它们的高度在Firefox中被视为0。换句话说，float属性会使元素不再被内容撑开。为了解决这个问题，我们需要给footer添加一个新的属性：overflow。这个属性可以确保即使内部元素使用了float，也能正常显示背景图片。修改后的代码如下：

```css

footer {

width: 730px;

background-image: url(../images/bg.jpg);

background-repeat: repeat-y;

overflow: auto; / 这个属性确保了背景图片在Firefox中的正常显示 /

}

```

现在，不论在哪个浏览器下，你的设计都能完美展现，背景图片和左右两栏的高度都能准确对齐。这就是CSS的魅力所在，让我们可以通过细微的调整，实现丰富的视觉效果。希望这个解决方案能帮到你，让你的网页在所有的浏览器中都能展现出最佳的效果。