盒模型是css中很重要的概念，但很多人不知道的是ie5.5及更早的ie瀏覽器採用的不是標準盒模型，我們稱之為ie盒模型。
標準盒模型的組成部分有：margin + border + padding + content，content部分的width height不包含border和padding。
而在ie盒模型中，塊級元素的width, height包含了border和padding。
這裡擷取網上的兩張盒模型的：
他們有什麼區別呢？粗看一眼好像兩者沒有什麼區別，但是細想一下，ie盒模型下，一旦設定了width和height，無論改變padding和border為多少，只要在總寬度和高度的承受範圍內，都不會改變整體的大小，當然太大了會溢位。而在標準盒模型中，改變padding和border都會使整個box的寬高改變。那麼如果把標準盒模型下的box放到ie盒模型下，就會打亂布局，少掉了border和padding，因為他們被width和height包含進去了。
我們發現有時候ie盒模型還是很有用的，比如說可能需要動態改變border的大小，但是又不想讓box改變，怎麼辦呢？
css3有乙個非常有用但應用不廣泛的屬性：
box-sizing: content-box | border-box | inherit
content-box，預設屬性，遵從標準盒模型。
border-box，是使用ie盒模型。
inherit，繼承父類的box-sizing屬性值。
瀏覽器的相容情況：
chrome/opera/ie 支援 box-sizing
firefox 支援 -moz-box-sizing
safari 支援 -webkit-box-sizing
我們來看一下其效果：
div.box
"box"
>第乙個內容
"box"
>第二個內容
我們將box的border設定更大一點：
現在border變成3em了但是box整體的寬高卻沒有變，當然border再大的話就會溢位了。
jquery < 1.8 的版本中有乙個靜態屬性boxmodel用來檢測瀏覽器使用的是ie盒模型還是標準盒模型，返回值是乙個boolean型別。
jquery1.0新增這個屬性:$.boxmodel
jquery1.3 - 1.7中更改了使用方法，並且將這個屬性標記為過時：$.support.boxmodel
jquery1.8後，這個屬性已經被移除，估計現在沒有多少人會使用這麼老的ie了吧。
除了jquery的檢測方法外，也可以用doctype宣告使用標準盒模型：
關於css3 box sizing屬性
在css3中，box sizing提供了兩種選擇，乙個是content box，乙個是border box。content box的模式裡，元素設定的寬和高為內容寬高 而border box中，元素設定的寬高為整體元素呈現出來的寬高。使用第二種模式就省去了計算，能夠十分簡單地，不需計算內外邊距而設定...
技術 CSS3 box sizing 屬性
說到 ie 的 bug，乙個臭名昭著的例子是它對於 盒模型 的錯誤解釋 在 ie5.x 以及 quirks 模式的 ie6 7 中，將 border 與 padding 都包含在 width 之內。這為前端工程師的工作平添了不少麻煩，幾戶每個需要定義尺寸的 box 都要思量一下 是否觸發了 盒模型 ...
css3 box sizing屬性值詳解
box sizing屬性可以為三個值之一 content box default border box，padding box。content box，border和padding不計算入width之內 padding box，padding計算入width內 border box，border和p...