IE8下DIV嵌套出现错误怎么办

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

IE8和FF浏览环境下的DIV嵌套效果：

这意味着，当我们把main作为DIV的父层，里面嵌套若干子层的DIV时，父层的样式将是被忽略的或者根本就是无效的，这将可能发生严重的问题。我们必须找出原因。原来，在IE8和FF环境下，一个没有任何内容的不定义高度的DIV是不会显示的。以上代码中，我们若给main定义一个高度，或将改为Hello，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:     HelloWorld!
HiGod!   

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

显然，id为main的父层DIV嵌套没有被id为sub的里层子DIV撑高，整体样式出现严重的走样效果。一个简便的处理方法是，在***一个子层DIV结束之后加上一个高度为0像素的DIV，且该DIV不允许两边有浮动对象：

  HelloWorld!
HiGod!
OK?    

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

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

然后将父层DIV代码中的改为。

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

感谢各位的阅读！关于"IE8下DIV嵌套出现错误怎么办"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

扫描关注千家信息网微信公众号，第一时间获取内容更新动态

转载请说明来源于"千家信息网"

本文地址：https://www.qianjiagd.com/a16355