IE的box模型顯示bug

2022-01-24 01:39:00 字數 777 閱讀 5371

原作者charlee、原始鏈結

以及本宣告。

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 原始鏈結http tech.idv2.com 2007 01 02 ie box model bug 以及本宣告。box模型即由等塊元素的 margin padding border width height 等屬性構成的顯示模型,它是css布局的基礎。通過設定的各種屬性,可以...

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...