IE的box模型顯示bug

2021-04-21 21:16:31 字數 834 閱讀 7953

原作者charlee、原始鏈結http://tech.idv2.com/2007/01/02/ie-box-model-bug/

以及本宣告。

box模型即由等塊元素的 margin、padding、border、width、height 等屬性構成的顯示模型,它是css布局的基礎。通過設定的各種屬性,可以得到任何想要的頁面效果。

各個元素的含義如下:

其中有問題的就是 width 和 height 的定義。一般的瀏覽器將 width 和 height 定義為除掉 margin、padding、border 之後的box內容的大小,實際上 box 所占有的面積為定義的 width/height 再加上 margin、padding、border的大小。

下圖演示了乙個box模型的大小計算方式,背景中每個方格為 10px。源**如下:

#box 

可以看到,這個 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 下ie對box模型的渲染方法的測試頁面,有興趣的可以用ie開啟看看。

IE的box模型顯示bug

原作者charlee 原始鏈結 以及本宣告。box模型即由等塊元素的 margin padding border width height 等屬性構成的顯示模型,它是css布局的基礎。通過設定的各種屬性,可以得到任何想要的頁面效果。各個元素的含義如下 其中有問題的就是 width 和 height ...

IE的box模型顯示bug

原作者charlee 原始鏈結 以及本宣告。box模型即由等塊元素的 margin padding border width height 等屬性構成的顯示模型,它是css布局的基礎。通過設定的各種屬性,可以得到任何想要的頁面效果。各個元素的含義如下 其中有問題的就是 width 和 height ...

解決IE文字重複顯示BUG

下面只有五個前 在ie6下多了乙個前 發生條件 css中用了float屬性,並且用了html注釋,補充說明 這個多文字bug在ie7和還在處於beta版的ie8已經得到解決。下面給出解決方法 div style width 200px div style float left div div sty...