（转）IE的box模型显示bug
box模型即由<div>等塊元素的 margin、padding、border、width、height 等屬性構成的顯示模型，它是CSS布局的基礎。通過設置<div>的各種屬性，可以得到任何想要的頁面效果。
各個元素的含義如下：
- margin: box外邊界到外層元素的距離，即余白。
- border: box的邊界寬度。
- padding: box內的內容到box內邊界的距離，即邊距。
- width: box的寬度。
- height: box的高度。
其中有問題的就是 width 和 height 的定義。一般的瀏覽器將 width 和 height 定義為除掉 margin、padding、border 之后的box內容的大小，實際上 box 所占有的面積為定義的 width/height 再加上 margin、padding、border的大小。
下圖演示了一個box模型的大小計算方式，背景中每個方格為 10px。源代碼如下：
#box { width: 150px; height: 100px; background: #F00; border: solid 20px green; padding: 30px; margin: 10px; } <div id="box"> <div id="content"></div> </div>可以看到，這個 150x100 的 box 實際上中間的內容部分為 150x100，算上 margin、border、padding 的總大小為 270x220。
而 IE 在 Quirk模式(兼容模式)下，計算width和height時會將margin、border、padding算進去， width和height成為了box的總大小。上面的代碼在 IE 下顯示結果如下：
那么如何讓 IE 與其他的瀏覽器顯示效果相同？可以通過在HTML文檔開頭指定 DOCTYPE 使 IE 工作在 Standard模式而不是 Quirk模式下。例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ....下面是各種 DOCTYPE 下IE對box模型的渲染方法的測試頁面，有興趣的可以用IE打開看看。
box-model-testpage.zip
版權聲明：可以任意轉載，但轉載時必須標明原作者charlee、原始鏈接http://tech.idv2.com/2007/01/02/ie-box-model-bug/以及本聲明。
?
轉載于:https://www.cnblogs.com/codeyu/archive/2008/11/14/1333533.html
總結
以上是生活随笔為你收集整理的（转）IE的box模型显示bug的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ASP.NET编程中的十大技巧【转载】
- 下一篇： 港版頂級豪華婚紗