這里和大家分享一下IE8下DIV嵌套出現(xiàn)錯(cuò)誤解決方案，最近用DIV寫(xiě)了幾個(gè)網(wǎng)頁(yè)，一開(kāi)始呢，從來(lái)沒(méi)有在IE8下面測(cè)試過(guò)，最近升級(jí)了IE8，發(fā)現(xiàn)了好些問(wèn)題，一開(kāi)始用IE6和IE7都沒(méi)有的新問(wèn)題出現(xiàn)了，大概就是以下的三種方法，請(qǐng)看詳細(xì)介紹。

IE8下DIV嵌套出現(xiàn)錯(cuò)誤解決方案

最近用DIV寫(xiě)了幾個(gè)網(wǎng)頁(yè)，一開(kāi)始呢，從來(lái)沒(méi)有在IE8下面測(cè)試過(guò)，最近升級(jí)了IE8，發(fā)現(xiàn)了好些問(wèn)題，一開(kāi)始用IE6和IE7都沒(méi)有的新問(wèn)題出現(xiàn)了，大概就是以下的三種方法，與君共勉！ 

<dividdivid=”a1″> 
 
<dividdivid=”b1″></div> 
 
<dividdivid=”b2″></div> 
 
</div> 
 

 當(dāng)b1和b2都是float=left時(shí)候，a1層的高度不會(huì)被b1和b2的高度撐開(kāi)。(這個(gè)現(xiàn)象只有IE8發(fā)生，其他版本IE以及IE8選擇兼容模式后就沒(méi)有問(wèn)題。)

解決方法：a1的display=table

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

不同的瀏覽器對(duì)CSS的解析可能存在出入，因此能在IE6和IE7正常顯示的CSS+DIV頁(yè)面在IE8和FF（即Firefox）瀏覽器中未必正常，需要格外留意。以下代碼在FF和IE8下無(wú)法正常顯示出DIV塊的內(nèi)容，僅有一條兩個(gè)像素高度的紅線（其實(shí)是上、下邊框擠在一處的結(jié)果）——

CSS:

#main{  
margin:auto;  
width:400px;  
background-color:#336699;  
border:1pxsolid#ff0000;  
}  
 
DIV:<dividdivid="main"></div> 
 

 IE8和FF瀏覽環(huán)境下的DIV嵌套效果：

這意味著，當(dāng)我們把main作為DIV的父層，里面嵌套若干子層的DIV時(shí)，父層的樣式將是被忽略的或者根本就是無(wú)效的，這將可能發(fā)生嚴(yán)重的問(wèn)題。我們必須找出原因。原來(lái)，在IE8和FF環(huán)境下，一個(gè)沒(méi)有任何內(nèi)容的不定義高度的DIV是不會(huì)顯示的。以上代碼中，我們?nèi)艚omain定義一個(gè)高度，或?qū)?lt;divid="main"></div>改為<divid="main">Hello</div>，IE8和FF下將正常顯示我們預(yù)設(shè)的效果。

嵌套DIV之后情形又如何呢？

里層的DIV是否被IE8和FF視為實(shí)體HTML元素？現(xiàn)在我們就來(lái)試驗(yàn)一下DIV嵌套效果：

CSS:

#main{  
margin:auto;  
width:400px;  
background-color:#336699;  
border:1pxsolid#ff0000;  
}  
 
#sub{  
width:200px;  
background-color:#aaa;  
float:left;  
}  
 
DIV:  
 
<dividdivid="main"> 
<dividdivid="sub"> 
HelloWorld!<br/>HiGod!  
</div> 
</div> 
 

在IE8和FF下的DIV嵌套效果如下圖所示：

顯然，id為main的父層DIV嵌套沒(méi)有被id為sub的里層子DIV撐高，整體樣式出現(xiàn)嚴(yán)重的走樣效果。一個(gè)簡(jiǎn)便的處理方法是，在***一個(gè)子層DIV結(jié)束之后加上一個(gè)高度為0像素的DIV，且該DIV不允許兩邊有浮動(dòng)對(duì)象：

<dividdivid="main"> 
<dividdivid="sub"> 
HelloWorld!<br/>HiGod!<br/>OK?  
</div> 
<divstyledivstyle="height:0px;clear:both;"></div> 
</div> 
 

第二種解決方法是定義一個(gè)CSS類：

.box:after{  
content:".";  
display:block;  
height:0px;  
clear:both;  
visibility:hidden;  
}  
 

然后將父層DIV代碼中的<divid="main">改為<divid="main"class="box">。

以上兩種方法都將出現(xiàn)如下圖所示的DIV嵌套效果：

【編輯推薦】

1. CSS解決DIV居中相關(guān)問(wèn)題
2. DIV CSS中id與class使用用原則與技巧
3. CSS中border和clear兩大屬性用法揭秘
4. 專家提醒 編寫(xiě)CSS時(shí)注意的七個(gè)方面
5. 解讀DIV CSS網(wǎng)頁(yè)布局中CSS無(wú)效十個(gè)原因