什麼是IE的Box模型？

Question

什麼是IE的Box模型，我經常在互聯網教程中看到？但我永遠無法清楚地理解它。

Answer 1

在IE 5.5和更早，並且在IE中的更高版本被渲染在怪癖模式中，padding被放置在內容width內，而不是在其周圍。

現在，只需使用觸發Doctype的標準模式，不用擔心。

Answer 2

它與Internet Explorer解釋和呈現CSS的方式有關，Internet Explorer不符合CSS標準100％，並且導致您的網頁可能看起來不同，這取決於您使用的瀏覽器。
做一點研究，你就會明白，爲了解決這個問題，你需要一點練習，因爲幾乎每一次都可能對你產生不同的影響。

Answer 3

http://www.google.com/search?hl=en&safe=off&client=firefox-a&hs=Ro2&rls=org.mozilla%3Aen-US%3Aofficial&q=IE+Box+Model+Hack&aq=f&aqi=&aql=&oq=&gs_rfai=

Answer 4

因此，在符合標準的瀏覽器中，框模型指的是瀏覽器如何計算元素的總寬度。

考慮以下的div：

<div id="zoidberg" style="width: 100px;"></div> 

現在，在IE和標準兼容的瀏覽器，所述總寬度是100個像素。比方說，你加10個像素的左側和右側緣至框：

<div id="zoidberg" style="width: 100px; margin-left: 10px; margin-right: 10px;"></div> 

眼下，在IE和符合標準的瀏覽器，總寬度爲120個像素（100個像素寬，再加上保證金的10個像素在左側）。到現在爲止還挺好。這是事情開始變得時髦的地方。讓我們爲這個無聊的div添加一個邊框：

<div id="zoidberg" style="width: 100px; margin-left: 10px; margin-right: 10px; border: 1px black solid"></div> 

所以現在我們有一個帶邊框的真棒div。不幸的是，由於IE不遵循標準，IE和標準兼容瀏覽器的總寬度不同。從這一點開始，IE的總寬度將是120像素（100像素寬，加上左右10個像素的邊距）。但是，符合標準的瀏覽器中div的寬度將爲122像素（100像素寬，20像素邊距和2像素邊界[左側1像素，右側1像素]。 ）你是否開始看到問題的發展？

嘿，我們的div看起來很奇怪，文本觸及邊界。讓我們添加一些填充：

<div id="zoidberg" style="width: 100px; margin-left: 10px; margin-right: 10px; border: 1px black solid; padding-left: 10px; padding-right: 10pxl"></div> 

很酷，現在看起來好多了。同樣，IE中的總寬度爲120（寬度爲100像素，外加20像素的邊距）。但是，在符合標準的瀏覽器中，框的總寬度現在計算爲142像素（寬度100像素，邊距20像素，邊框2像素和填充像素20像素[右側10像素，10像素]）

所以要回答你的問題，IE的盒子模型是IE如何計算一個元素的總寬度。它忽略邊界和填充，只考慮邊距和寬度。符合標準的瀏覽器通過添加元素的寬度，邊距，邊框和填充來計算總寬度。就個人而言，IE的方法使得的方式更有意義，但這不是標準，所以我們不得不抱怨。