本文向大家描述一下Firefox瀏覽器里DIV重疊（高度問(wèn)題）的解決辦法，用DIV+CSS布局的頁(yè)面在IE瀏覽器中顯示得好好的，可是一到Firefox瀏覽器中就出現(xiàn)布局DIV層重疊的現(xiàn)象，主要是因?yàn)镕irefox和IE在處理層方面有一些細(xì)微的差別，請(qǐng)看本文具體解決方法。

Firefox瀏覽器里DIV重疊（高度問(wèn)題）的解決辦法

用DIV+CSS布局的頁(yè)面在IE瀏覽器中顯示得好好的，可是一到Firefox瀏覽器中就出現(xiàn)布局DIV層重疊的現(xiàn)象，主要是因?yàn)镕irefox和IE在處理層方面有一些細(xì)微的差別。通過(guò)我制作頁(yè)面的經(jīng)驗(yàn)，為大家提出一個(gè)常見(jiàn)的解決辦法。

<styletypestyletype="text/CSS"> 
#top{  
float:left;  
margin:4px;  
}  
#foot{  
border:1pxsolidrgb(192,192,192);  
margin:0pxauto;  
}  
.clear{  
clear:both;  
}  
</style> 
<dividdivid="top">此處為第一個(gè)層的內(nèi)容</div> 
此處為文章的具體內(nèi)容。  
<divclassdivclass="clear"></div> 
<dividdivid="foot">此處為第二個(gè)層的內(nèi)容</div> 
 

以上代碼中紅色部分即為解決div層重疊的方法，即在兩個(gè)層中間加一個(gè)空白層，清除該層兩邊的浮動(dòng)，使得上面的層與下面的層不在同一行。

在hbcms的CSS框架下，可以直接用<divclass="clear"></div>

clear:both;/*該行的目的就是增加了一個(gè)空白層，清除該層兩邊的浮動(dòng)使得上面的層與下面的腳注層不在同一行*/

CSS讓兩個(gè)div重疊做網(wǎng)頁(yè)的時(shí)候在div里放了一個(gè)別的網(wǎng)頁(yè)的天氣插件，但是點(diǎn)擊了會(huì)跳到廣告頁(yè)面的，想去網(wǎng)上找個(gè)禁止div點(diǎn)擊的方法，可是發(fā)現(xiàn)沒(méi)有，用了js的方法好像也沒(méi)有成功，后來(lái)覺(jué)得還是用兩個(gè)層重疊的方法來(lái)阻止點(diǎn)擊，雖然定位是有點(diǎn)麻煩。

<divstyledivstyle="position:relative"> 
<divstyledivstyle="position:absolute;left:0;top:0"></div> 
<divstyledivstyle="position:absolute;left:0;top:0"></div> 
</div> 
 

relative是相對(duì)定位的意思。absolute是絕對(duì)定位，很奇妙少了一個(gè)都不行，但是放在一起就可以實(shí)現(xiàn)一個(gè)div中兩個(gè)div重疊在一起。

z-index:1這個(gè)是決定兩個(gè)層在一起的顯示順序，z-index的默認(rèn)值是0，適合層多的時(shí)候用。
 

【編輯推薦】

1. 學(xué)習(xí)筆記 剖析CSS縮寫六大規(guī)則
2. CSS樣式表特點(diǎn)及嵌入網(wǎng)頁(yè)的四種途徑
3. 三種方法實(shí)現(xiàn)CSS樣式表插入
4. CSS外邊距設(shè)置屬性margin用法
5. 探究CSS高級(jí)語(yǔ)法中選擇器分組和CSS繼承用法