當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

IE的box模型显示bug

發布時間：2023/11/27 生活经验 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 IE的box模型显示bug 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

原作者charlee、原始鏈接http://tech.idv2.com/2007/01/02/ie-box-model-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打開看看。

總結

以上是生活随笔為你收集整理的IE的box模型显示bug的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。