上一篇
下一篇
11
30
DIV多层嵌套的问题 不自动撑大
作者:独木舟 日期:2010-11-30
我们做DIV+CSS布局时常常如下的做多层DIV的嵌套，可是我们却发现不管是在IE8 还是FF下都层在毛病
1、当我们这样直接使用时
<div class="*">
……
ul,p,table,span等文本级别元素
</div>
这个时候我们发现div的样式可以正确应用，我们可以通过给div加边框就可以看出，这个时候DIV的边框是包含了整个文本区域
2、当我们这样用时候
<div class="1">
<div class="2"></div>
<div class="3"></div>
</div>
这个时候我们发现问题出现了，在IE8和FF下，DIV 1的边框变成了一条直线，在最上面，并没有随着内部两个DIV的内容而撑大，原来是因为如果父级DIV没有定义高度，并且内容为空时所定义样式将无效，或我们直观看到的就好似不自动伸长的错误，上网和网友讨论很久，经过我可爱的百度，不停的转换关键字搜索，终于找到了解决办法，屡试不爽
定义这样一个样式表
/*解决FF，IE8，DIV嵌套时，外部DIV没有定义高度，并且内部无内容只有有内嵌套的DIV时，外DIV不能被撑大的问题*/
.box:after{ content:".";height:0px;display:block; clear:both; visibility: hidden;}
我们对div 1 使用即可
<div class="1 box">
在刷新我们的网页试试，怎么样，终于解决了……
PS:
程序代码
1、当我们这样直接使用时
<div class="*">
……
ul,p,table,span等文本级别元素
</div>
这个时候我们发现div的样式可以正确应用，我们可以通过给div加边框就可以看出，这个时候DIV的边框是包含了整个文本区域
2、当我们这样用时候
<div class="1">
<div class="2"></div>
<div class="3"></div>
</div>
这个时候我们发现问题出现了，在IE8和FF下，DIV 1的边框变成了一条直线，在最上面，并没有随着内部两个DIV的内容而撑大，原来是因为如果父级DIV没有定义高度，并且内容为空时所定义样式将无效，或我们直观看到的就好似不自动伸长的错误，上网和网友讨论很久，经过我可爱的百度，不停的转换关键字搜索，终于找到了解决办法，屡试不爽
定义这样一个样式表
/*解决FF，IE8，DIV嵌套时，外部DIV没有定义高度，并且内部无内容只有有内嵌套的DIV时，外DIV不能被撑大的问题*/
.box:after{ content:".";height:0px;display:block; clear:both; visibility: hidden;}
我们对div 1 使用即可
<div class="1 box">
在刷新我们的网页试试，怎么样，终于解决了……
PS:
程序代码.clearfix:after {
clear: both;
content: '.';
display: block;
height: 0px;
overflow: hidden;
visibility: hidden;
}
clear: both;
content: '.';
display: block;
height: 0px;
overflow: hidden;
visibility: hidden;
}
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: -
发表评论
