這里和大家分享一下IE8下DIV嵌套出現錯誤解決方案，最近用DIV寫了幾個網頁，一開始呢，從來沒有在IE8下面測試過，最近升級了IE8，發現了好些問題，一開始用IE6和IE7都沒有的新問題出現了，大概就是以下的三種方法，請看詳細介紹。

IE8下DIV嵌套出現錯誤解決方案

最近用DIV寫了幾個網頁，一開始呢，從來沒有在IE8下面測試過，最近升級了IE8，發現了好些問題，一開始用IE6和IE7都沒有的新問題出現了，大概就是以下的三種方法，與君共勉！ 

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

 當b1和b2都是float=left時候，a1層的高度不會被b1和b2的高度撐開。(這個現象只有IE8發生，其他版本IE以及IE8選擇兼容模式后就沒有問題。)

解決方法：a1的display=table

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

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

CSS:

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

 IE8和FF瀏覽環境下的DIV嵌套效果：

這意味著，當我們把main作為DIV的父層，里面嵌套若干子層的DIV時，父層的樣式將是被忽略的或者根本就是無效的，這將可能發生嚴重的問題。我們必須找出原因。原來，在IE8和FF環境下，一個沒有任何內容的不定義高度的DIV是不會顯示的。以上代碼中，我們若給main定義一個高度，或將<divid="main"></div>改為<divid="main">Hello</div>，IE8和FF下將正常顯示我們預設的效果。

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

里層的DIV是否被IE8和FF視為實體HTML元素？現在我們就來試驗一下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嵌套沒有被id為sub的里層子DIV撐高，整體樣式出現嚴重的走樣效果。一個簡便的處理方法是，在***一個子層DIV結束之后加上一個高度為0像素的DIV，且該DIV不允許兩邊有浮動對象：

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

第二種解決方法是定義一個CSS類：

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

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

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

【編輯推薦】

1. CSS解決DIV居中相關問題
2. DIV CSS中id與class使用用原則與技巧
3. CSS中border和clear兩大屬性用法揭秘
4. 專家提醒 編寫CSS時注意的七個方面
5. 解讀DIV CSS網頁布局中CSS無效十個原因