下面是一幅關於應用了css的元素是如何顯示它的尺寸的圖示。
在本篇文章中，所有的瀏覽器在計算盒模型總寬度時處理margin屬性的方式都是一致的，所以我們將更多的精力放在padding和border屬性上。
首先看一下《 the w3c box model》，這裡所寫出的標準，如果沒問題的話，是應該被所有標準的現代瀏覽器及ie6和它的後續版本所遵循的。在w3c盒模型中，乙個塊級元素的總寬度按照如下的方程式計算：
總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
對於高度也使用同樣的計算方法，但是為了簡便起見從現在開始我只說width。
ie盒模型的計算方式和w3c的很相似，但有一點是非常不同的，這就是：填充和邊框並不被包含在計算的範圍內。
總寬度 = margin-left + width + margin-right
這就意味著一旦元素擁有橫向的填充和/或邊框，實際的內容區域（content area ）就要擴大來創造出他們佔據的空間。
ie5.5及更早的版本使用的是ie盒模型。很多人似乎沒注意到ie6及更新的版本在標準相容模式（standards compliant mode）下使用的是w3c的盒模型標準。我們說這是乙個好訊息因為這意味著此盒模型問題只會出現在ie5.5及其更早的版本中。只要為文件設定乙個doctype，就會使得ie遵循標準相容模式的方式工作。
現在確定了ie6及後續版本都會遵循標準相容模式，那現在唯一要關注的事情就是如何令ie5.5及更早版本中的網頁和其在更現代的瀏覽器中呈現出的是一致的。如果你目前就遇到了這個問題，那麼下面的幾個方法會幫助到你，我以我的喜好為它們列出了優先順序。
避免導致這個問題的情景
插入額外的標記
使用條件注釋判斷語句
使用css hacks
因為這個由盒模型解析方式不同導致的問題往往只是針對表象上的顯示，所以我個人偏好的方法就是盡量避免不去觸發ie5.*/win的這個bug，而有些時候會不可避免的遇到，那我就會使用下面介紹的方法中的乙個。
這是我的首選，很簡單，就是避免為乙個元素同時設定width和padding值或者width和border值，再或者width同時和它們兩個值。這確保了所有的瀏覽器都會一樣的去計算元素的總寬度，而不用考慮它們使用哪種盒模型方式。
我這裡拿乙個例子說明，下面的html用來定義乙個新聞列表：
為了得到乙個250畫素寬的列表，且應用1畫素的邊框和10畫素的填充，會用到這樣的css：
#news在符合標準的瀏覽器中，總寬度是250畫素（1px left border + 10px left padding + width + 10px right padding + 1px right border）。但在ie5.5及更早的版本中，總寬度只是228畫素，因為它並未計算邊框和填充的值。
那麼該如何避免這個問題呢？讓我們假設新聞列表在另乙個容器裡，比如它在側邊欄（sidebar）裡：
...如果是這樣，你可以為父容器（sidebar）設定寬度來達到效果：
#sidebar如果情況不容許你使用第一種方法，那可以使用插入額外的標記這個方法。還是使用前面那個例子，這次我們在#news裡面插入乙個標記：#news
使用如下的css：
#news外層的元素提供寬度，包含在裡面的元素提供邊框和填充。#news div
是否使用乙個額外標記這種妥協式的方式的決定權在於開發者本身。避免使用這種方式的好處是顯而易見的，但是乙個額外的div標籤除了會增加檔案的體積和降低**的可維護性之外，不會產生其他的不良影響。它不會影響到頁面的無障礙性以及當css文件不存在的時候文件的可閱讀性。此外，增加乙個額外的標記還會為某些設計上的實現提供便利條件。
如果沒有合適的父容器來控制寬度也不能通過新增額外的標記解決問題，那針對ie 5.*/win我們就需要設定乙個不同的width值了。
我的建議，這麼做最安全的方式就是使用條件注釋判斷語句（conditional comments,）這些內容只能在ie/win中被解析，下面的**只有在ie6以下的版本中被執行：
如果你打算使用這個方法，我建議將全部的針對ie 5.*/win的**都轉移到乙個單獨的css檔案中來載入它： 最後你還可以通過使用乙個css hack（css hack）來為ie 5.*/win提供修改過的屬性值。我的建議是盡量不使用css hacks。顧名思義，它們是hacks，hacks是基於不同瀏覽器對css解析不同導致的無證錯誤之上的。因為現在依然有很多人在使用hacks，所以我在這裡提一下也無妨。除非你明確的知道在做些什麼，否則我還是要建議你盡可能的使用其他方法。針對盒模型問題最簡單的css hack是sbmh（the simplified box model hack），案例的html**和上面第乙個是一樣的，css是：
#news所有的瀏覽器都會看到並理解「width:250px」，但ie 5.*/win不會讀取下面的一行，width:228px，但這行會被其餘的瀏覽器解析。所以最後，ie 5.*/win得到的width值是250px，其他瀏覽器得到的是228px。這樣，在全部的瀏覽器中我們的新聞列表的總寬度就一致了。
我在本文中展示了如何避免或解決因css盒模型計算不同而導致的問題的辦法，你可以根據實際情況來選擇使用哪一種方法。
需要提到的是，可能在未來的某個時間，css3的「box-sizing」屬性會給開發者選擇盒模型解析方式的權利（在新發布的css草案中，容許開發者使用content-box和border-box屬性來選擇盒模型解析的型別）。w3c的盒模型方式被稱為「content-box」，ie的被稱為「border-box」。因為每一種盒模型的解析方式都存在著利與弊，所以可以使用這項技術是有好處的。但說回來，對於這種屬性的任何具體的落實，都會面臨一些瀏覽器尚不支援的尷尬情況。
mj 標準CSS盒模型和IE瀏覽器盒模型
css盒子模型又稱為框模型，它裡面包含了外邊距margin，邊框border，內邊距padding，以及元素內容content。由內到外分別是從content，padding，border，以及margin。標準盒模型的width為盒子中的content的寬度，通常設定背景時設定的是內容，內邊距，邊...
css盒模型（IE和標準）
文件中每個元素都會被描述為乙個矩形盒子，盒子有乙個邊界，分別為margin edge，border edge，padding edge，content edge。盒子模型分為標準盒子模型和ie盒子模型 微軟沒有遵從w3c標準 這兩者的關鍵差別在於 w3c盒子模型 屬性高 height 和屬性寬 wi...
CSS盒模型（標準模型和IE模型）
css盒模型就是乙個盒子，封裝周圍的html元素，包括border 邊框 padding 內邊距 margin 外邊距 content 實際內容 css盒模型 標準模型和ie模型 標準盒模型 width是內容區的寬度，width會跟隨padding margin，border變化而變化,元素真正的寬...