IE8下DIV嵌套出现外层自适应高度(四种解决方法)
升级了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;即可。
为了您的安全，请只打开来源可靠的网址打开网站 取消
来自: http://hi.baidu.com/icemanjinx/blog/item/05bde30034580989e850cd5a.html