IE8下DIV嵌套出现错误解决方案-div 嵌套

这里和大家分享一下IE8下DIV嵌套出现错误解决方案，最近用DIV写了几个网页，一开始呢，从来没有在IE8下面测试过，最近升级了IE8，发现了好些问题，一开始用IE6和IE7都没有的新问题出现了，大概就是以下的三种方法，请看详细介绍。

IE8下DIV嵌套出现错误解决方案

最近用DIV写了几个网页，一开始呢，从来没有在IE8下面测试过，最近升级了IE8，发现了好些问题，一开始用IE6和IE7都没有的新问题出现了，大概就是以下的三种方法，与君共勉！

<dividdivid=”a1″> 
 
<dividdivid=”b1″></div> 
 
<dividdivid=”b2″></div> 
 
</div> 
 
1.
2.
3.
4.
5.
6.
7.
8.

当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> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.

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> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

在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> 
 
1.
2.
3.
4.
5.
6.
7.

第二种解决方法是定义一个CSS类：

.box:after{  
content:".";  
display:block;  
height:0px;  
clear:both;  
visibility:hidden;  
}  
 
1.
2.
3.
4.
5.
6.
7.
8.

然后将父层DIV代码中的<divid="main">改为<divid="main"class="box">。

以上两种方法都将出现如下图所示的DIV嵌套效果：

【编辑推荐】