div在不同浏览器下的兼容性问题在日常项目是非常让人头痛和烦恼的，由于div中内容使用了浮动float属性，以致非IE下没有检测到高度而产生问题，而IE则可以正常检测到高度，以下是一个折衷的处理方案（用CSS伪元素:after）：
注：本文内容部分转自http://dreamweaver.abang.com/od/dwskill/a/height-firefox.htm
1、HTML页面代码如下：
<body>
<div id="box">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
2、CSS代码如下：
View Code
body {
font-size: 12px;
}
#box {
background:#fafafa;
border:1px solid #dfdfdf;
padding:20px;
width:300px;
}
#left,#right {
width:120px;
height:120px;
border:1px solid #00a1e9;
background:#ddf4ff;
text-align:center;
}
#left {
float:left;
}
#right {
float:right;
}
3、各浏览器下的效果如下：
4、解决办法：用CSS伪元素:after（IE浏览器不支持:after伪元素，所以对它毫无影响）
优点：只需要在CSS代码中操作即可，不需要在Html中加任何代码
缺点：每一个id都要在CSS中加一段清除代码
所以，在CSS最后要增加的样式代码如下：
#box:after {
height:0;
content:".";
clear:both;
display:block;
visibility:hidden;
}
最终的效果在IE及FF下都正常了，如图：
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
