IE8下DIV嵌套出现外层自适应高度
2011-02-26 15:10
267 查看
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浏览环境下的效果:
![](http://hiphotos.baidu.com/icemanjinx/pic/item/83c7aef27d58e956b17ec570.jpg)
这意味着,当我们把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下的效果如下图所示:
![](http://hiphotos.baidu.com/icemanjinx/pic/item/6295c6136137b0c56438db70.jpg)
显然,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">。
以上两种方法都将出现如下图所示的效果:
![](http://hiphotos.baidu.com/icemanjinx/pic/item/60fa9f80b67176929023d970.jpg)
第四种:其实很简单,只需给外层div加个overflow:auto;即可。
为了您的安全,请只打开来源可靠的网址
打开网站 取消
来自: http://hi.baidu.com/icemanjinx/blog/item/05bde30034580989e850cd5a.html
升级了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浏览环境下的效果:
![](http://hiphotos.baidu.com/icemanjinx/pic/item/83c7aef27d58e956b17ec570.jpg)
这意味着,当我们把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下的效果如下图所示:
![](http://hiphotos.baidu.com/icemanjinx/pic/item/6295c6136137b0c56438db70.jpg)
显然,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">。
以上两种方法都将出现如下图所示的效果:
![](http://hiphotos.baidu.com/icemanjinx/pic/item/60fa9f80b67176929023d970.jpg)
第四种:其实很简单,只需给外层div加个overflow:auto;即可。
为了您的安全,请只打开来源可靠的网址
打开网站 取消
来自: http://hi.baidu.com/icemanjinx/blog/item/05bde30034580989e850cd5a.html
相关文章推荐
- IE8下DIV嵌套出现外层自适应高度(四种解决方法)
- IE6,IE8下DIV嵌套,外层DIV高度自适应
- div ul li 嵌套后如何解决增加多个li后ul高度自适应问题
- DIV嵌套过程中的高度自适应问题
- 外层div自适应内层div高度
- DIV嵌套时外层无法自适应高度三种解决方案
- div ul li 嵌套后如何解决增加多个li后ul高度自适应问题
- div嵌套ul时div的宽度和高度自适应
- IE8 div嵌套div(或table)自动下移,设置高度导致css样式错位
- div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
- div ul li 嵌套后解决高度自适应方法
- DIV嵌套时外层无法自适应高度三种解决方案(转)
- DIV嵌套同域iframe的高度自适应
- IE8 div嵌套div(或table)自动下移,设置高度导致css样式错位
- div ul li 嵌套后解决高度自适应方法
- CSS hack 多DIV嵌套 自适应高度问题
- DIV 100% 自适应高度 不出现滚动条
- DIV嵌套时外层无法自适应高度三种解决方案
- div里嵌套iframe,让iframe及div高度一起随内容自适应高度问题
- HTML篇之CSS样式——div ul li 嵌套后解决高度自适应方法