原作者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...