升級了IE8，發現了好些問題，一開始用IE6和IE7都沒有的新問題出現了，總歸時間有餘，就四處查閱解決辦法，大概就是以下的四種方法！
<div id=”a1″>

<div id=”b1″></div>

<div id=”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: 1px solid #ff0000;
}

DIV: <div id="main"></div>
IE8和FF瀏覽環境下的效果：

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

巢狀DIV之後情形又如何呢？裡層的DIV是否被IE8和FF視為實體HTML元素？現在我們就來試驗一下DIV巢狀效果：

CSS:

#main {
margin: auto;
width: 400px;
background-color: #336699;
border: 1px solid #ff0000;
}

#sub {
width: 200px;
background-color: #aaa;
float: left;
}

DIV:

<div id="main">
<div id="sub">
Hello World !<br />Hi God !
</div>
</div>
在IE8和FF下的效果如下圖所示：



顯然，id為main的父層DIV沒有被id為sub的裡層子DIV撐高，整體樣式出現嚴重的走樣效果。一個簡便的處理方法是，在最後一個子層DIV結束之後加上一個高度為0畫素的DIV，且該DIV不允許兩邊有浮動物件：

<div id="main">
<div id="sub">
Hello World !<br />Hi God !<br />OK?
</div>
<div style="height:0px;clear:both;"></div>
</div>
第二種解決方法是定義一個CSS類：

.box:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
然後將父層DIV程式碼中的<div id="main">改為<div id="main" class="box">。

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

第四種：其實很簡單，只需給外層div加個overflow:auto;即可。