最近老大面试中遇到了一个问题：
<h2>在IE6,FF container的高度是多少</h2>
<div id="container" class="" style="padding:20px;border:solid 5px #ccc;" >
<div id="" class="" style="margin:15px;border:solid 5px #000; height:30px;" >
abc
</div>
</div>
在火狐里面的盒模型图如下：
然而在IE8的盒模型图如下：
这边我们再来看一下下面那例子：
我在页面定义两个div，分别加上各自的样式（主要两个样式之间小小的区别）
<html>
<head>
<title></title>
<style>
.t1 {height:3px;background-color:green;font-size:10px}
.t2 {height:3px;background-color:green;overflow:hidden;font-size:0px}
</style>
</head>
<body>
<div class="t1"></div>
<br>
<br>
<div class="t2"></div>
</body>
</html>
最后在测试IE8的效果图：
在火狐的效果图：
可能有的人会说我没有在div里面写上一些文字内容，但是如果你自己测试一下的话发现渲染的div的高度还是一样的。这边IE会默认div的高度为一个字体显示的高度，所以它会撑开。
----所以在IE和Firefox下解析div的高度的时候还是有区别的。
IE:根据div的内容的高度去动态地变化，当然如果内容超过设置的高度时，也会根据实际的高度。
FF：当内容超过了设置的高度时，内容会超出，但是div使用的样式还是不会变化的。
当然如果你看过《精通CSS高级Web标准解决方案》的话，里面有一段是讲述空白边叠加的，
-----------------我喜欢抓起浏览器的差异，然后去做测试研究，查看资料，如果有什么错的希望指正。
扫一扫
1235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
