[科普中國]-IE盒模型缺陷

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

背景層疊樣式表是一種為萬維網(wǎng)文檔添加樣式(如字體、顏色、空 間)的簡單機制1。CSS的規(guī)范描述了網(wǎng)頁的元素如何被圖形瀏覽器展現(xiàn)。CSS1的規(guī)范第四節(jié)定義了一個給塊級元素 - 比如說p和blockquote - 一個寬度和高度，和3個級別的環(huán)繞它的框 - padding, border,和margin - 的“格式化模型”。盡管該規(guī)范從來沒有明確使用過“盒模型”一詞，這個詞已經(jīng)被網(wǎng)頁開發(fā)人員和網(wǎng)頁瀏覽器供應(yīng)商廣泛使用。在HTML 4和CSS之前，很少HTML元素既支持border也支持padding，所以對一個元素的寬度和高度的定義并不是很有爭議。然而，它取決于元素的不同而變化。在HTML，table的width屬性定義了一個表格 - 包括其邊框 - 的寬度。另一方面，圖像（img）的width屬性定義的則是這個圖像本身（在任何邊框之內(nèi)）的寬度。在早期的那些日子，支持padding屬性的元素就是表單元格。表單元格的寬度被定義為“以像素為單位的單元格內(nèi)容的建議寬度，不包括填充”。在1996年，CSS[為多得多的元素引入了margin, border和padding屬性。它通過了一個對margin, border和padding的處理類似于表單元格的，相對于內(nèi)容的寬度定義。從此這已成為著名的W3C盒模型。在那時，非常少瀏覽器供應(yīng)商嚴格地實施了W3C盒模型。當時的兩種主要瀏覽器，Netscape 4.0和Internet Explorer 4.0均定義寬度和高度為邊框到邊框的距離。這已被稱為傳統(tǒng)或者Internet Explorer盒模型。

缺陷根據(jù)由萬維網(wǎng)聯(lián)盟（W3C）于1996年發(fā)行并于1999年修訂的CSS1所指定的，當任意一個塊級元素的寬度或高度被顯式指定，它應(yīng)當只確定這個可見元素自身的寬度或高度，而padding, border和margin隨后被應(yīng)用。Internet Explorer在“怪異模式”（怪異模式）則把內(nèi)容，內(nèi)邊距（padding）和邊框（border）全部包括在一個指定的寬度或高度之內(nèi)；這導(dǎo)致它呈現(xiàn)出一個比遵從標準行為的結(jié)果更窄或者更短的盒子。

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

文件類型描述缺失或不完整時；

遇到一個HTML 3或者更早的文檔時；

使用HTML 4.0 Transitional或Frameset的文件類型描述且系統(tǒng)標識符（URI）不存在時；

在DOCTYPE聲明之前出現(xiàn)SGML注釋或者其它無法識別的內(nèi)容時；

文檔任何地方有錯誤時；

注釋符相遇時出現(xiàn)末尾文字重復(fù)；

Internet Explorer 6也會在DOCTYPE聲明之前出現(xiàn)XML聲明時使用quirks模式。

各種解決方法已被制定以迫使Internet Explorer 5以及更早版本使用W3C盒模型顯示網(wǎng)頁。這些解決方法一般是利用Internet Explorer的CSS選擇器作用的無關(guān)的缺陷以從瀏覽器中隱藏某些規(guī)則。這些解決方法中，最為熟知的是由Tantek ?elik，一個工作于IE for Mac時發(fā)現(xiàn)這個主意的前微軟員工，開發(fā)的“盒模型hack”。它涉及到為IE for Windows指定一個寬度聲明，隨后使用另一個為CSS-兼容的瀏覽器指定的寬度重寫它。第二條聲明通過利用IE for Windows解析CSS規(guī)則的其它缺陷而從該瀏覽器中隱藏。這些CSS“hacks”的實施直到Internet Explorer 7的公開發(fā)行為止都被進一步兼容。IE 7只修復(fù)了一部分問題，而不是其它的，這導(dǎo)致使用這些hacks的頁面出現(xiàn)一些意想不到的問題盒模型hacks已證明是不可靠的，因為它們依賴于瀏覽器對CSS支持的缺陷，而這些缺陷可能會在以后的版本中被修復(fù)。由于這個原因，一些網(wǎng)頁開發(fā)者改以推薦避免對同一個元素既指定width也指定padding或者使用條件注釋以及/或CSS filters以解決在較舊版本Internet Explorer上的盒模型缺陷。

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

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

本詞條內(nèi)容貢獻者為:

李岳陽 - 副教授 - 江南大學(xué)