最近老大面試中遇到了一個問題：
<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标準解決方案》的話，裡面有一段是講述空白邊疊加的，
-----------------我喜歡抓起浏覽器的差異，然後去做測試研究，檢視資料，如果有什麼錯的希望指正。