DIV背景圖片在Firefox下不顯示通過overflow:auto可解決
發(fā)布時間：2013-07-03 17:54:18 作者：佚名 
我要評論
我要評論div里加入背景圖片，可是在Firefox下卻無法正確顯示背景圖片，通過overflow:auto便可解決此問題，感興趣的朋友可以參考下哈，希望對大家有所幫助
在一個大的div里有2個橫列(DIV)，并且在大的div里加入背景圖片?？墒歉暮煤螅贔irefox下卻無法正確顯示背景圖片。代碼是這樣的：
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)的背景，來達(dá)到左右兩欄高度對齊。
解決辦法：
這是因?yàn)槟愕?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；
}
1.HTML(樣本)：
復(fù)制代碼
代碼如下:<div id="footer">
<div id="footer_left">Content1</div>
<div id="footer_right">Content2</div>
</div>
2. CSS:
復(fù)制代碼
代碼如下:#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)的背景，來達(dá)到左右兩欄高度對齊。
解決辦法：
這是因?yàn)槟愕?footer_left 和#footer_right加了float:left，在FF里如果里面的元素加了float:left（right),它就不會被撐開的，也就是說的它的高度是0，如果正常顯示，必須加上：overflow:auto,
即：
復(fù)制代碼
代碼如下:#footer {
width:730px;
background-image: url(../images/bg.jpg);
background-repeat: repeat-y;
overflow:auto；
}
相關(guān)文章
詳解CSS中zoom屬性或overflow:auto屬性清除浮動的作用
這篇文章主要為大家介紹了CSS中zoom屬性或overflow:auto屬性清除浮動的作用,文中通過實(shí)例代碼介紹的很詳細(xì)，相信會對大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋2016-11-26- 小編之前遇到一次這個bug解決之后，今天又遇到，還是不明白，于是搜索發(fā)現(xiàn)解決方法很簡單，現(xiàn)在分享出來給大家一起看看。2016-09-05
CSS教程:導(dǎo)致一些問題的overflow-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
overflow有問題嗎？沒問題。那為什么說要慎用呢？因?yàn)橛袝r會導(dǎo)致一些問題。。。 關(guān)于overflow:auto的，很多人貪他書寫方便，直接用來清除浮動。但是Firefox使用overflow:au2008-10-17
這篇文章主要介紹了overflow:auto的用法詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-19