DIV背景圖片在Firefox下不顯示通過overflow:auto可解決

2024-07-11 08:28:41

字體：大中小

來源：轉載

供稿：網友

在一個大的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；
}

上一篇：下拉菜單select樣式設置(兼容IE6/IE7/IE8/火狐)

下一篇：解決中文版Chrome下網頁不能顯示小于12px字體