IE盒模型缺陷
此條目需要更新。 (2020年9月28日) |
IE盒模型缺陷(英語:Internet Explorer box model bug)是指早期版本的Internet Explorer調整網頁元素大小的方法,和W3C為層疊樣式表(CSS)語言推薦的標準方式不同。在Internet Explorer 6中,瀏覽器支持一種解決了這種差異的可選的渲染模式(叫做「遵從標準模式」)。然而,出於向後兼容的原因,所有版本的IE(截至IE 9及IE 10 Developer Preview)仍然默認表現為通常的,非標準的模式[註 1]。Internet Explorer for Mac不受這種非標準行為影響。此外,Internet Explorer 10於其Consumer Preview之中也改變其默認怪異模式為一種更加符合規範的類似於非IE瀏覽器的怪異模式[1]。
![](http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/W3C_and_Internet_Explorer_box_models.svg/300px-W3C_and_Internet_Explorer_box_models.svg.png)
width
屬性的差異。背景
編輯CSS的規範描述了網頁的元素如何被圖形瀏覽器展現。CSS1的規範第四節定義了一個給塊級元素 - 比如說p
和blockquote
- 一個寬度和高度,和3個級別的環繞它的框 - padding
, border
,和margin
- 的「格式化模型」[2]。儘管該規範從來沒有明確使用過「盒模型」一詞,這個詞已經被網頁開發人員和網頁瀏覽器供應商廣泛使用。
在HTML 4和CSS之前,很少HTML元素既支持border也支持padding,所以對一個元素的寬度和高度的定義並不是很有爭議。然而,它取決於元素的不同而變化。在HTML,table的width屬性定義了一個表格 - 包括其邊框 - 的寬度[3]。另一方面,圖像(img
)的width屬性定義的則是這個圖像本身(在任何邊框之內)的寬度[4]。在早期的那些日子,唯一支持padding屬性的元素就是表單元格。表單元格的寬度被定義為「以像素為單位的單元格內容的建議寬度,不包括填充」[5]。
在1996年,CSS[6]為多得多的元素引入了margin, border和padding屬性。它通過了一個對margin, border和padding的處理類似於表單元格的,相對於內容的寬度定義[7]。從此這已成為著名的W3C盒模型。
在那時,非常少瀏覽器供應商嚴格地實施了W3C盒模型。當時的兩種主要瀏覽器,Netscape 4.0和Internet Explorer 4.0均定義寬度和高度為邊框到邊框的距離[8]。這已被稱為傳統[9]或者Internet Explorer盒模型。[10]
缺陷
編輯根據由萬維網聯盟(W3C)於1996年發行並於1999年修訂的CSS1所指定的,當任意一個塊級元素的寬度或高度被顯式指定,它應當只確定這個可見元素自身的寬度或高度,而padding, border和margin隨後被應用。[2][11]Internet Explorer在「怪異模式」(怪異模式)則把內容,內邊距(padding)和邊框(border)全部包括在一個指定的寬度或高度之內;這導致它呈現出一個比遵從標準行為的結果更窄或者更短的盒子。[12]
解決方法
編輯如果頁面包含某些HTML文件類型描述,則Internet Explorer 6及以上版本不受該缺陷的影響。然而這些版本由於向後兼容的原因,在quirks模式下維持這種錯誤的行為。[13]例如,如下會觸發quirks模式:
- 文件類型描述缺失或不完整時;
- 遇到一個HTML 3或者更早的文檔時;
- 使用HTML 4.0 Transitional或Frameset的文件類型描述且系統標識符(URI)不存在時;
- 在DOCTYPE聲明之前出現SGML註釋或者其它無法識別的內容時;
- 文檔任何地方有錯誤時;
- 註釋符相遇時出現末尾文字重複;
- Internet Explorer 6也會在DOCTYPE聲明之前出現XML聲明時使用quirks模式。[14]
各種解決方法已被制定以迫使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的頁面出現一些意想不到的問題。[13]
盒模型hacks已證明是不可靠的,因為它們依賴於瀏覽器對CSS支持的缺陷,而這些缺陷可能會在以後的版本中被修復。由於這個原因,一些網頁開發者改以推薦避免對同一個元素既指定width也指定padding或者使用條件註釋以及/或CSS filters以解決在較舊版本Internet Explorer上的盒模型缺陷。[15][16]
對Internet Explorer盒模型的支持
編輯網頁設計者Doug Bowman說過起初的Internet Explorer盒模型代表了一個更好,更有邏輯性的方法。[17] Peter-Paul Koch則給出了一個物理上盒子的例子,其尺寸總是指盒子自身的,包括可能的內邊距 - padding,但是從來不是它的內容。[9]他說這種盒模型對圖形化設計者來說更有用,他們創造基於盒子的可見寬度而不是其內容的寬度的設計。[18](使用過 VS 窗體設計器或類似工具的開發者會很容易理解 IE 盒模型的用意所在。)Bernie Zimmermann說Internet Explorer盒模型更接近於HTML表格模型中單元格的尺寸和填充。[19]
W3C已在CSS3內包括了一個box-sizing屬性。當為一個元素指定box-sizing: border-box;
時,該元素的任意padding或border都在指定的width和height的內部,「就像通常舊版HTML用戶代理所實施的那樣」。[20] 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
屬性以支持相同功能[21]。
註釋
編輯- ^ 參見:quirks mode
參考文獻
編輯- ^ Interoperable HTML5 Quirks Mode in IE10 (頁面存檔備份,存於互聯網檔案館), IE Blog, MSDN
- ^ 2.0 2.1 Håkon Wium Lie; Bert Bos. Cascading Style Sheets, level 1. World Wide Web Consortium. 1999-01-11 [2007-06-24]. (原始內容存檔於2014-04-09).
- ^ Raggett, Dave. The HTML3 Table Model. World Wide Web Consortium. 1996-01-23 [210-07-27]. (原始內容存檔於2012-01-03). RFC 1942 HTML Tables. IETF. [2012-02-06]. (原始內容存檔於2012-01-29).
The default table width is the space between the current left and right margins.
- ^ Raggett, Dave; Arnaud Le Hors, Ian Jacobs. 13 Objects, Images, and Applets # Width and height. World Wide Web Consortium. 1999-12-24 [2010-07-27]. (原始內容存檔於2008-03-12).
- ^ Raggett, Dave. HTML 3.2 Reference Specification. World Wide Web Consortium. 1997-01-14 [2010-07-07]. (原始內容存檔於2010-06-19).
- ^ Håkon Wium Lie; Bert Bos. Cascading Style Sheets, level 1. World Wide Web Consortium. Dec 1996 [2010-07-27]. (原始內容存檔於2009-04-01).
- ^ Cascading Style Sheets, level 1. World Wide Web Consortium. [2010-07-07]. (原始內容存檔於2010-05-27).
- ^ Box model tweaking. CSS2 tests. Xs4all.nl. [2010-07-07]. (原始內容存檔於2009-08-23).
- ^ 9.0 9.1 CSS2 - Box model tweaking. Quirksmode.org. [2010-07-07]. (原始內容存檔於2010-06-29).
- ^ Johansson, Roger. Internet Explorer and the CSS box model. 2006-12-21 [2008-11-12]. (原始內容存檔於2008-11-07).
- ^ Håkon Wium Lie; Bert Bos. Cascading Style Sheets, level 1. World Wide Web Consortium. 1996-12-17 [2006-12-09]. (原始內容存檔於2006-12-19).
- ^ Lance Silver. CSS Enhancements in Internet Explorer 6. Microsoft Developer Network. Microsoft. March 2001 [2007-06-24]. (原始內容存檔於2007-07-01).
- ^ 13.0 13.1 Markus Mielke. Cascading Style Sheet Compatibility in Internet Explorer 7. Microsoft Developer Network. Microsoft. 2006-09-26 [2007-06-24]. (原始內容存檔於2007-06-29). "Pages authored under non-strict mode (quirks)will not change behavior in IE7 and will not be affected by broken CSS filters.Pages authored under non-strict mode(or「quirks mode」)will not change behavior in IE7."
- ^ !DOCTYPE. Microsoft Developer Network. Microsoft. [2007-01-13]. (原始內容存檔於2008-05-06). "The following examples show how to use the !DOCTYPE declaration to specify the DTD a document conforms to, and to switch Internet Explorer 6 and later to standards-compliant mode."
- ^ Roger Johansson. Internet Explorer and the CSS box model. 456 Berea Street. 2006-12-21 [2007-01-14]. (原始內容存檔於2007-01-15).
- ^ Arve Bersvendsen. Hack-free CSS for IE. Arve Bersvendsen's weblog. February 2004 [2007-01-16]. (原始內容存檔於2007-01-15).
- ^ Vorsprung durch Webstandards | Douglas Bowman declares his love to CSS. Vorsprungdurchwebstandards.de. [2010-07-07]. (原始內容存檔於2010-06-14).
- ^ Vorsprung durch Webstandards | Peter-Paul Koch declares his love to CSS. Vorsprungdurchwebstandards.de. [2010-07-07]. (原始內容存檔於2010-02-27).
- ^ Box Model Enlightenment, Bernie Zimmermann. Bernzilla.com. 2003-04-04 [2010-07-07]. (原始內容存檔於2010-12-27).
- ^ CSS3 Basic User Interface Module. World Wide Web Consortium. [2012-02-09]. (原始內容存檔於2010-12-01).
- ^ -moz-box-sizing. Mozilla Developer Center. Mozilla. 2009-04-11 [2009-04-11]. (原始內容存檔於2010-06-26).
It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
外部連結
編輯- 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之間渲染方式的差異的進一步解釋。