IE8下DIV嵌套出現錯誤怎么辦

這篇文章給大家分享的是有關IE8下DIV嵌套出現錯誤怎么辦的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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

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

<dividdivid=”a1&Prime;>  <dividdivid=”b1&Prime;></div>  <dividdivid=”b2&Prime;></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嵌套效果：

感謝各位的閱讀！關于“IE8下DIV嵌套出現錯誤怎么辦”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！