IE盒模型缺陷

**IE 盒模型缺陷**（英語：Internet Explorer box model bug）是指早期版本的 Internet Explorer 調整網頁元素大小的方法，和 W3C 為層疊樣式表（CSS）語言推薦的標準方式不同。在 Internet Explorer 6 中，瀏覽器支持一種解決了這種差異的可選的渲染模式（叫做「遵從標準模式」）。然而，出於向後兼容的原因，所有版本的 IE（截至 IE 9 及 IE 10 Developer Preview）仍然默認表現為通常的，非標準的模式。Internet Explorer for Mac 不受這種非標準行為影響。此外，Internet Explorer 10 於其 Consumer Preview 之中也改變其默認怪異模式為一種更加符合規範的類似於非 IE 瀏覽器的怪異模式。

## 背景

CSS 的規範描述了網頁的元素如何被圖形瀏覽器展現。CSS1 的規範第四節定義了一個給塊級元素 - 比如說 `p` 和 `blockquote` - 一個寬度和高度，和 3 個級別的環繞它的框 - `padding`, `border`, 和 `margin` - 的「格式化模型」。儘管該規範從來沒有明確使用過「盒模型」一詞，這個詞已經被網頁開發人員和網頁瀏覽器供應商廣泛使用。

在 HTML 4 和 CSS 之前，很少 HTML 元素既支持 border 也支持 padding，所以對一個元素的寬度和高度的定義並不是很有爭議。然而，它取決於元素的不同而變化。在 HTML，table 的 width 屬性定義了一個表格 - 包括其邊框 - 的寬度。另一方面，圖像（`img`）的 width 屬性定義的則是這個圖像本身（在任何邊框之內）的寬度。在早期的那些日子，唯一支持 padding 屬性的元素就是表單元格。表單元格的寬度被定義為「以像素為單位的單元格內容的建議寬度，不包括填充」。

在 1996 年，CSS 為多得多的元素引入了 margin, border 和 padding 屬性。它通過了一個對 margin, border 和 padding 的處理類似於表單元格的，相對於內容的寬度定義。從此這已成為著名的 W3C 盒模型。

在那時，非常少瀏覽器供應商嚴格地實施了 W3C 盒模型。當時的兩種主要瀏覽器，Netscape 4.0 和 Internet Explorer 4.0 均定義寬度和高度為邊框到邊框的距離。這已被稱為_傳統_或者 _Internet Explorer 盒模型_。

## 缺陷

根據由全球資訊網聯盟（W3C）於 1996 年發行並於 1999 年修訂的 CSS1 所指定的，當任意一個塊級元素的寬度或高度被顯式指定，它應當只確定這個可見元素自身的寬度或高度，而 padding, border 和 margin 隨後被應用。Internet Explorer 在「怪異模式」（怪異模式）則把內容，內邊距（padding）和邊框（border）全部包括在一個指定的寬度或高度之內；這導致它呈現出一個比遵從標準行為的結果更窄或者更短的盒子。

## 解決方法

如果頁面包含某些 HTML 文件類型描述，則 Internet Explorer 6 及以上版本不受該缺陷的影響。然而這些版本由於向後兼容的原因，在 quirks 模式下維持這種錯誤的行為。例如，如下會觸發 quirks 模式：

* 文件類型描述缺失或不完整時；
* 遇到一個 HTML 3 或者更早的文檔時；
* 使用 HTML 4.0 Transitional 或 Frameset 的文件類型描述且系統標識符（URI）不存在時；
* 在 DOCTYPE 聲明之前出現 SGML 注釋或者其它無法識別的內容時；
* 文檔任何地方有錯誤時；
* 注釋符相遇時出現末尾文字重複；
* Internet Explorer 6 也會在 DOCTYPE 聲明之前出現 XML 聲明時使用 quirks 模式。

各種解決方法已被制定以迫使 Internet Explorer 5 以及更早版本使用 W3C 盒模型顯示網頁。這些解決方法一般是利用 Internet Explorer 的 CSS 選擇器作用的無關的缺陷以從瀏覽器中隱藏某些規則。這些解決方法中，最為熟知的是由 Tantek Çelik，一個工作於 IE for Mac 時發現這個主意的前微軟員工，開發的「盒模型 hack」。它涉及到為 IE for Windows 指定一個寬度聲明，隨後使用另一個為 CSS - 兼容的瀏覽器指定的寬度重寫它。第二條聲明通過利用 IE for Windows 解析 CSS 規則的其它缺陷而從該瀏覽器中隱藏。這些 CSS「hacks」的實施直到 Internet Explorer 7 的公開發行為止都被進一步兼容。IE 7 隻修復了一部分問題，而不是其它的，這導致使用這些 hacks 的頁面出現一些意想不到的問題。

盒模型 hacks 已證明是不可靠的，因為它們依賴於瀏覽器對 CSS 支持的缺陷，而這些缺陷可能會在以後的版本中被修復。由於這個原因，一些網頁開發者改以推薦避免對同一個元素既指定 width 也指定 padding 或者使用條件注釋以及 / 或 CSS filters 以解決在較舊版本 Internet Explorer 上的盒模型缺陷。

## 對 Internet Explorer 盒模型的支持

網頁設計者 Doug Bowman 說過起初的 Internet Explorer 盒模型代表了一個更好，更有邏輯性的方法。 Peter-Paul Koch 則給出了一個物理上盒子的例子，其尺寸總是指盒子自身的，包括可能的內邊距 - padding，但是從來不是它的內容。他說這種盒模型對圖形化設計者來說更有用，他們創造基於盒子的可見寬度而不是其內容的寬度的設計。（使用過 VS 窗體設計器或類似工具的開發者會很容易理解 IE 盒模型的用意所在。）Bernie Zimmermann 說 Internet Explorer 盒模型更接近於 HTML 表格模型中單元格的尺寸和填充。

W3C 已在 CSS3 內包括了一個 box-sizing 屬性。當為一個元素指定 `box-sizing: border-box;` 時，該元素的任意 padding 或 border 都在指定的 width 和 height 的_內部_，「就像通常舊版 HTML 用戶代理所實施的那樣」。 Internet Explorer 8，WebKit 瀏覽器如 Safari 5.1 + 和 Google Chrome，Opera 7.0 和以後版本，和 Konqueror 3.3.2 和以後版本均支持 CSS3 的 box-sizing 屬性。基於 Gecko 的瀏覽器如 Mozilla Firefox 使用廠商指定的 `-moz-box-sizing` 屬性以支持相同功能。

## 注釋

## 參考文獻

## 外部連結

* Tantek Çelik's description of the "box model hack"（頁面存檔備份，存於網際網路檔案館）
* Getting Internet Explorer to Play Well with CSS - 在 about.com 的概述了避開盒模型缺陷和其它 IE 問題的各種方式的文章。
* Cascading Style Sheet Compatibility in Internet Explorer 7（頁面存檔備份，存於網際網路檔案館） - MSDN article, July 2006.
* CSS Box Model differences in Firefox and Internet Explorer - 對 Mozilla Firefox 與 Internet Explorer 之間渲染方式的差異的進一步解釋。