跳转到内容

IE盒模型缺陷：修订间差异

维基百科，自由的百科全书
以互动方式浏览历史
←上一版本下一版本→
删除的内容 添加的内容
可视化wikitext
Πrate（留言 | 贡献）
38,423次编辑
无编辑摘要
第1行： 第1行：
[[File:W3C and Internet Explorer box models.svg|thumb|300px|W3C 和 Internet Explorer 的盒模型解释 <code>width</code> 属性的差异。]]
[[File:W3C and Internet Explorer box models.svg|thumb|300px|W3C和Internet Explorer的盒模型解释<code>width</code>属性的差异。]]


'''IE盒模型缺陷'''（{{lang-en|'''Internet Explorer box model bug'''}}）是指早期版本的[[Internet Explorer]]调整网页元素大小的方法，和[[W3C]]为[[层叠样式表]]（CSS）语言推荐的标准方式不同。在[[Internet Explorer 6]]中，浏览器支持一种解决了这种差异的可选的渲染模式（叫做「遵从标准模式」）。然而，出于向后兼容的原因，所有版本的 IE 仍然默认表现为通常的，非标准的模式<ref group="注">参见：[[:en:quirks mode|quirks mode]]</ref>。[[Internet Explorer for Mac]]不受这种非标准行为影响。
'''IE盒模型缺陷'''（{{lang-en|'''Internet Explorer box model bug'''}}）是指早期版本的[[Internet Explorer]]调整网页元素大小的方法，和[[W3C]]为[[层叠样式表]]（CSS）语言推荐的标准方式不同。在[[Internet Explorer 6]]中，浏览器支持一种解决了这种差异的可选的渲染模式（叫做「遵从标准模式」）。然而，出于向后兼容的原因，所有版本的IE仍然默认表现为通常的，非标准的模式<ref group="注">参见：[[:en:quirks mode|quirks mode]]</ref>。[[Internet Explorer for Mac]]不受这种非标准行为影响。


==背景==
==背景==
CSS 的规范描述了[[网页]]的元素如何被图形浏览器展现。CSS1的规范第四节定义了一个给块级元素 - 比如说 <code>p</code> 和 <code>blockquote</code> - 一个宽度和高度，和3个级别的环绕它的框 - <code>padding</code>, <code>border</code>, 和 <code>margin</code> - 的「格式化模型」<ref name="CSS-19990111">{{Cite web| url=http://www.w3.org/TR/1999/REC-CSS1-19990111#formatting-model | title=Cascading Style Sheets, level 1 | author=Håkon Wium Lie | coauthors=Bert Bos | date=11 January 1999 | publisher=[[World Wide Web Consortium]] | accessdate=2007-06-24}}</ref>。尽管该规范从来没有明确使用过「盒模型」一词，这个词已经被网页开发人员和网页浏览器供应商广泛使用。
CSS的规范描述了[[网页]]的元素如何被图形浏览器展现。CSS1的规范第四节定义了一个给块级元素 - 比如说<code>p</code>和<code>blockquote</code> - 一个宽度和高度，和3个级别的环绕它的框 - <code>padding</code>, <code>border</code>,和<code>margin</code> - 的「格式化模型」<ref name="CSS-19990111">{{Cite web| url=http://www.w3.org/TR/1999/REC-CSS1-19990111#formatting-model | title=Cascading Style Sheets, level 1 | author=Håkon Wium Lie | coauthors=Bert Bos | date=11 January 1999 | publisher=[[World Wide Web Consortium]] | accessdate=2007-06-24}}</ref>。尽管该规范从来没有明确使用过「盒模型」一词，这个词已经被网页开发人员和网页浏览器供应商广泛使用。


在HTML 4和CSS之前，很少HTML元素既支持 border 也支持 padding，所以对一个元素的宽度和高度的定义并不是很有争议。然而，它取决于元素的不同而变化。在HTML，table的width属性定义了一个表格 - 包括其边框 - 的宽度<ref>{{Cite web|first=Dave|last=Raggett|url=http://www.w3.org/TR/WD-tables-960123|title=The HTML3 Table Model|publisher=[[World Wide Web Consortium]]|date=23 January 1996|accessdate=27 July 210}}{{Cite web|url=http://www.ietf.org/rfc/rfc1942.txt|title=RFC 1942 HTML Tables|quote=The default table width is the space between the current left and right margins.|publisher=[[IETF]]}}</ref>。另一方面，图像 (<code>img</code>) 的 width 属性定义的则是这个图像本身（在任何边框之内）的宽度<ref>{{Cite web|last=Raggett|first=Dave|title=13 Objects, Images, and Applets # Width and height|url=http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#h-13.7.1|publisher=[[World Wide Web Consortium]]|accessdate=27 July 2010|coauthors=Arnaud Le Hors, Ian Jacobs|date=24 December 1999}}</ref>。在早期的那些日子，唯一支持 padding 属性的元素就是表单元格。表单元格的宽度被定义为「以像素为单位的单元格内容的建议宽度，不包括填充」<ref>{{Cite web|url=http://www.w3.org/TR/REC-html32|first=Dave|last=Raggett|date=14 January 1997|title=HTML 3.2 Reference Specification |publisher=[[World Wide Web Consortium]] |accessdate=2010-07-07}}</ref>。
在HTML 4和CSS之前，很少HTML元素既支持border也支持padding，所以对一个元素的宽度和高度的定义并不是很有争议。然而，它取决于元素的不同而变化。在HTML，table的width属性定义了一个表格 - 包括其边框 - 的宽度<ref>{{Cite web|first=Dave|last=Raggett|url=http://www.w3.org/TR/WD-tables-960123|title=The HTML3 Table Model|publisher=[[World Wide Web Consortium]]|date=23 January 1996|accessdate=27 July 210}}{{Cite web|url=http://www.ietf.org/rfc/rfc1942.txt|title=RFC 1942 HTML Tables|quote=The default table width is the space between the current left and right margins.|publisher=[[IETF]]}}</ref>。另一方面，图像（<code>img</code>）的width属性定义的则是这个图像本身（在任何边框之内）的宽度<ref>{{Cite web|last=Raggett|first=Dave|title=13 Objects, Images, and Applets # Width and height|url=http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#h-13.7.1|publisher=[[World Wide Web Consortium]]|accessdate=27 July 2010|coauthors=Arnaud Le Hors, Ian Jacobs|date=24 December 1999}}</ref>。在早期的那些日子，唯一支持padding属性的元素就是表单元格。表单元格的宽度被定义为「以像素为单位的单元格内容的建议宽度，不包括填充」<ref>{{Cite web|url=http://www.w3.org/TR/REC-html32|first=Dave|last=Raggett|date=14 January 1997|title=HTML 3.2 Reference Specification |publisher=[[World Wide Web Consortium]] |accessdate=2010-07-07}}</ref>。


在 1996 年，CSS<ref>{{Cite web|title=Cascading Style Sheets, level 1|url=http://www.w3.org/TR/CSS1/|publisher=[[World Wide Web Consortium]]|accessdate=27 July 2010|author=Håkon Wium Lie|coauthors=Bert Bos|month=Dec|year=1996}}</ref> 为多得多的元素引入了 margin, border 和 padding 属性。它通过了一个对 margin, border 和 padding 的处理类似于表单元格的，相对于内容的宽度定义<ref>{{Cite web|url=http://www.w3.org/TR/REC-CSS1-961217 |title=Cascading Style Sheets, level 1 |publisher=[[World Wide Web Consortium]] |accessdate=2010-07-07}}</ref>。从此这已成为著名的W3C盒模型。
在1996年，CSS<ref>{{Cite web|title=Cascading Style Sheets, level 1|url=http://www.w3.org/TR/CSS1/|publisher=[[World Wide Web Consortium]]|accessdate=27 July 2010|author=Håkon Wium Lie|coauthors=Bert Bos|month=Dec|year=1996}}</ref>为多得多的元素引入了margin, border和padding属性。它通过了一个对margin, border和padding的处理类似于表单元格的，相对于内容的宽度定义<ref>{{Cite web|url=http://www.w3.org/TR/REC-CSS1-961217 |title=Cascading Style Sheets, level 1 |publisher=[[World Wide Web Consortium]] |accessdate=2010-07-07}}</ref>。从此这已成为著名的W3C盒模型。


在那时，非常少浏览器供应商严格地实施了W3C盒模型。当时的两种主要浏览器，[[Netscape]] 4.0 和 [[Internet Explorer 4|Internet Explorer 4.0]] 均定义宽度和高度为边框到边框的距离<ref>{{Cite web|url=http://www.xs4all.nl/~ppk/css2tests/box.html |title= Box model tweaking | work = CSS2 tests |publisher=Xs4all.nl |accessdate=2010-07-07}}</ref>。这已被称为''传统''<ref name="CSS2 - Box model tweaking">{{Cite web|url=http://www.quirksmode.org/css/box.html |title=CSS2 - Box model tweaking |publisher=Quirksmode.org |accessdate=2010-07-07}}</ref>或者 ''Internet Explorer 盒模型''。<ref>{{Cite web| url=http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/ | title=Internet Explorer and the CSS box model | date=21 December 2006 | accessdate=2008-11-12 | last=Johansson | first=Roger }}</ref>
在那时，非常少浏览器供应商严格地实施了W3C盒模型。当时的两种主要浏览器，[[Netscape]] 4.0和[[Internet Explorer 4|Internet Explorer 4.0]]均定义宽度和高度为边框到边框的距离<ref>{{Cite web|url=http://www.xs4all.nl/~ppk/css2tests/box.html |title= Box model tweaking | work = CSS2 tests |publisher=Xs4all.nl |accessdate=2010-07-07}}</ref>。这已被称为''传统''<ref name="CSS2 - Box model tweaking">{{Cite web|url=http://www.quirksmode.org/css/box.html |title=CSS2 - Box model tweaking |publisher=Quirksmode.org |accessdate=2010-07-07}}</ref>或者''Internet Explorer盒模型''。<ref>{{Cite web| url=http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/ | title=Internet Explorer and the CSS box model | date=21 December 2006 | accessdate=2008-11-12 | last=Johansson | first=Roger }}</ref>


==缺陷==
==缺陷==
根据由[[万维网联盟]] (W3C) 于 1996 年发行并于 1999 年修订的 CSS1 所指定的，当任意一个块级元素的宽度或高度被显式指定，它应当只确定这个可见元素自身的宽度或高度，而 padding, border 和 margin 随后被应用。<ref name="CSS-19990111" /><ref>{{Cite web| url=http://www.w3.org/TR/REC-CSS1-961217#formatting-model | title= Cascading Style Sheets, level 1 | author=Håkon Wium Lie | coauthors=Bert Bos | date=17 December 1996 | publisher=[[World Wide Web Consortium]] | accessdate=2006-12-09}}</ref>[[Internet Explorer]] 在「[[:en:quirks mode|quirks 模式]]」则把内容，内边距 (padding) 和边框 (border) 全部包括在一个指定的宽度或高度之内；这导致它呈现出一个比遵从标准行为的结果更窄或者更短的盒子。<ref>{{Cite web| url=http://msdn2.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic3 | title=CSS Enhancements in Internet Explorer 6 | author=Lance Silver | month=March | year=2001 | publisher=[[Microsoft]] | work=[[Microsoft Developer Network]] | accessdate=2007-06-24}}</ref>
根据由[[万维网联盟]]（W3C）于1996年发行并于1999年修订的CSS1所指定的，当任意一个块级元素的宽度或高度被显式指定，它应当只确定这个可见元素自身的宽度或高度，而padding, border和margin随后被应用。<ref name="CSS-19990111" /><ref>{{Cite web| url=http://www.w3.org/TR/REC-CSS1-961217#formatting-model | title= Cascading Style Sheets, level 1 | author=Håkon Wium Lie | coauthors=Bert Bos | date=17 December 1996 | publisher=[[World Wide Web Consortium]] | accessdate=2006-12-09}}</ref>[[Internet Explorer]]在「[[:en:quirks mode|quirks模式]]」则把内容，内边距（padding）和边框（border）全部包括在一个指定的宽度或高度之内；这导致它呈现出一个比遵从标准行为的结果更窄或者更短的盒子。<ref>{{Cite web| url=http://msdn2.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic3 | title=CSS Enhancements in Internet Explorer 6 | author=Lance Silver | month=March | year=2001 | publisher=[[Microsoft]] | work=[[Microsoft Developer Network]] | accessdate=2007-06-24}}</ref>


==解决方法==
==解决方法==
如果页面包含某些[[HTML]][[文件类型描述]]，则 [[Internet Explorer 6]] 及以上版本不受该缺陷的影响。然而这些版本由于向后兼容的原因，在quirks模式下维持这种错误的行为。<ref name="msdn IE7 blog">{{Cite web|url=http://msdn2.microsoft.com/en-us/library/bb250496.aspx | title=Cascading Style Sheet Compatibility in Internet Explorer 7 | accessdate=2007-06-24 | author=Markus Mielke | date=26 September 2006 | publisher=[[Microsoft]] |work=[[Microsoft Developer Network]] }} "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."</ref>例如，如下会触发quirks模式：
如果页面包含某些[[HTML]][[文件类型描述]]，则[[Internet Explorer 6]]及以上版本不受该缺陷的影响。然而这些版本由于向后兼容的原因，在quirks模式下维持这种错误的行为。<ref name="msdn IE7 blog">{{Cite web|url=http://msdn2.microsoft.com/en-us/library/bb250496.aspx | title=Cascading Style Sheet Compatibility in Internet Explorer 7 | accessdate=2007-06-24 | author=Markus Mielke | date=26 September 2006 | publisher=[[Microsoft]] |work=[[Microsoft Developer Network]] }} "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."</ref>例如，如下会触发quirks模式：


*[[文件类型描述]]缺失或不完整时；
*[[文件类型描述]]缺失或不完整时；
*遇到一个HTML 3或者更早的文档时；
*遇到一个HTML 3或者更早的文档时；
*使用HTML 4.0 Transitional 或 Frameset 的文件类型描述且系统标识符 ([[URI]]) 不存在时；
*使用HTML 4.0 Transitional或Frameset的文件类型描述且系统标识符（[[URI]]）不存在时；
*在 DOCTYPE 声明之前出现 SGML 注释或者其它无法识别的内容时；
*在DOCTYPE声明之前出现SGML注释或者其它无法识别的内容时；
*文档任何地方有错误时；
*文档任何地方有错误时；
*Internet Explorer 6 也会在 DOCTYPE 声明之前出现 [[XML]] 声明时使用 quirks 模式。<ref>{{Cite web| url=http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx | title=!DOCTYPE | accessdate=2007-01-13 |publisher=[[Microsoft]]|work=[[Microsoft Developer Network]]}} "The following examples show how to use the !DOCTYPE declaration to specify the DTD a document conforms to, and to switch Internet Explorer&nbsp;6 and later to standards-compliant mode."</ref>
*Internet Explorer 6也会在DOCTYPE声明之前出现[[XML]]声明时使用quirks模式。<ref>{{Cite web| url=http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx | title=!DOCTYPE | accessdate=2007-01-13 |publisher=[[Microsoft]]|work=[[Microsoft Developer Network]]}} "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."</ref>


各种解决方法已被制定以迫使 Internet Explorer 5 以及更早版本使用 W3C 盒模型显示网页。这些解决方法一般是利用 Internet Explorer 的 CSS 选择器作用的无关的缺陷以从浏览器中隐藏某些规则。这些解决方法中，最为熟知的是由 [[:en:Tantek Çelik|Tantek Çelik]]，一个工作于 IE for Mac 时发现这个主意的前微软员工，开发的「盒模型 hack」。它涉及到为 IE for Windows 指定一个宽度声明，随后使用另一个为 CSS-兼容的浏览器指定的宽度重写它。第二条声明通过利用 IE for Windows 解析 CSS 规则的其它缺陷而从该浏览器中隐藏。这些 CSS「hacks」的实施直到 Internet Explorer 7 的公开发行为止都被进一步兼容。IE 7 只修复了一部分问题，而不是其它的，这导致使用这些 hacks 的页面出现一些意想不到的问题。<ref name="msdn IE7 blog"/>
各种解决方法已被制定以迫使Internet Explorer 5以及更早版本使用W3C盒模型显示网页。这些解决方法一般是利用Internet Explorer的CSS选择器作用的无关的缺陷以从浏览器中隐藏某些规则。这些解决方法中，最为熟知的是由[[:en:Tantek Çelik|Tantek Çelik]]，一个工作于IE for Mac时发现这个主意的前微软员工，开发的「盒模型hack」。它涉及到为IE for Windows指定一个宽度声明，随后使用另一个为CSS-兼容的浏览器指定的宽度重写它。第二条声明通过利用IE for Windows解析CSS规则的其它缺陷而从该浏览器中隐藏。这些CSS「hacks」的实施直到Internet Explorer 7的公开发行为止都被进一步兼容。IE 7只修复了一部分问题，而不是其它的，这导致使用这些hacks的页面出现一些意想不到的问题。<ref name="msdn IE7 blog"/>


盒模型 hacks 已证明是不可靠的，因为它们依赖于浏览器对 CSS 支持的缺陷，而这些缺陷可能会在以后的版本中被修复。由于这个原因，一些网页开发者改以推荐避免对同一个元素既指定 width 也指定 padding 或者使用条件注释 ([[:en:conditional comment]]) 以及/或 [[CSS filter]]s 以解决在较旧版本 Internet Explorer 上的盒模型缺陷。<ref>{{Cite web| url=http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/ | title=Internet Explorer and the CSS box model | author=Roger Johansson | date=21 December 2006|publisher=456 Berea Street | accessdate=2007-01-14 }}</ref><ref>{{Cite web| url=http://virtuelvis.com/archives/2004/02/css-ie-only | title=Hack-free CSS for IE | author=Arve Bersvendsen | month=February | year=2004 | work=Arve Bersvendsen's weblog | accessdate=2007-01-16 }}</ref>
盒模型hacks已证明是不可靠的，因为它们依赖于浏览器对CSS支持的缺陷，而这些缺陷可能会在以后的版本中被修复。由于这个原因，一些网页开发者改以推荐避免对同一个元素既指定width也指定padding或者使用条件注释（[[:en:conditional comment]]）以及/或[[CSS filter]]s以解决在较旧版本Internet Explorer上的盒模型缺陷。<ref>{{Cite web| url=http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/ | title=Internet Explorer and the CSS box model | author=Roger Johansson | date=21 December 2006|publisher=456 Berea Street | accessdate=2007-01-14 }}</ref><ref>{{Cite web| url=http://virtuelvis.com/archives/2004/02/css-ie-only | title=Hack-free CSS for IE | author=Arve Bersvendsen | month=February | year=2004 | work=Arve Bersvendsen's weblog | accessdate=2007-01-16 }}</ref>


==对 Internet Explorer 盒模型的支持==
==对Internet Explorer盒模型的支持==
网页设计者 Doug Bowman 说过起初的 Internet Explorer 盒模型代表了一个更好，更有逻辑性的方法。<ref>{{Cite web|url=http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/douglas-bowman/ |title=Vorsprung durch Webstandards &#124; Douglas Bowman declares his love to CSS |publisher=Vorsprungdurchwebstandards.de |accessdate=2010-07-07}}</ref> Peter-Paul Koch 则给出了一个物理上盒子的例子，其尺寸总是指盒子自身的，包括可能的内边距 - padding，但是从来不是它的内容。<ref name="CSS2 - Box model tweaking"/>他说这种盒模型对图形化设计者来说更有用，他们创造基于盒子的可见宽度而不是其内容的宽度的设计。<ref>{{Cite web|url=http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/peter-paul-koch/ |title=Vorsprung durch Webstandards &#124; Peter-Paul Koch declares his love to CSS |publisher=Vorsprungdurchwebstandards.de |accessdate=2010-07-07}}</ref> Bernie Zimmermann 说 Internet Explorer 盒模型更接近于 HTML 表格模型中单元格的尺寸和填充。<ref>{{Cite web|url=http://www.bernzilla.com/item.php?id=33 |title=Box Model Enlightenment, Bernie Zimmermann |publisher=Bernzilla.com |date=4 April 2003|accessdate=2010-07-07}}</ref>
网页设计者Doug Bowman说过起初的Internet Explorer盒模型代表了一个更好，更有逻辑性的方法。<ref>{{Cite web|url=http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/douglas-bowman/ |title=Vorsprung durch Webstandards | Douglas Bowman declares his love to CSS |publisher=Vorsprungdurchwebstandards.de |accessdate=2010-07-07}}</ref> Peter-Paul Koch则给出了一个物理上盒子的例子，其尺寸总是指盒子自身的，包括可能的内边距 - padding，但是从来不是它的内容。<ref name="CSS2 - Box model tweaking"/>他说这种盒模型对图形化设计者来说更有用，他们创造基于盒子的可见宽度而不是其内容的宽度的设计。<ref>{{Cite web|url=http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/peter-paul-koch/ |title=Vorsprung durch Webstandards | Peter-Paul Koch declares his love to CSS |publisher=Vorsprungdurchwebstandards.de |accessdate=2010-07-07}}</ref> Bernie Zimmermann说Internet Explorer盒模型更接近于HTML表格模型中单元格的尺寸和填充。<ref>{{Cite web|url=http://www.bernzilla.com/item.php?id=33 |title=Box Model Enlightenment, Bernie Zimmermann |publisher=Bernzilla.com |date=4 April 2003|accessdate=2010-07-07}}</ref>


W3C 已在 CSS3 内包括了一个 box-sizing 属性。当为一个元素指定 <code>box-sizing: border-box;</code> 时，该元素的任意 padding 或 border 都在指定的 width 和 height 的''内部''，「就像通常旧版 HTML 用户代理所实施的那样」。<ref>{{Cite web| url=http://www.w3.org/TR/css3-ui/#box-sizing | title=CSS3 Basic User Interface Module | publisher=[[World Wide Web Consortium]]}}</ref> [[Internet Explorer 8]]，[[WebKit]] 浏览器如 [[Safari]] 5.1+ 和 [[Google Chrome]]，[[Opera]] 7.0 和以后版本，和 [[Konqueror]] 3.3.2 和以后版本均支持 CSS3 的 box-sizing 属性。基于 [[Gecko]] 的浏览器如 [[Mozilla Firefox]] 使用[[专有软件|厂商指定]]的 <code>-moz-box-sizing</code> 属性以支持相同功能<ref>{{Cite web|url=https://developer.mozilla.org/en/CSS/box-sizing |title=-moz-box-sizing |accessdate=2009-04-11 |work=[[Mozilla Developer Center]] |publisher=[[Mozilla]]|date=11 April 2009 |quote=It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification. }}</ref>。
W3C已在CSS3内包括了一个box-sizing属性。当为一个元素指定<code>box-sizing: border-box;</code>时，该元素的任意padding或border都在指定的width和height的''内部''，「就像通常旧版HTML用户代理所实施的那样」。<ref>{{Cite web| url=http://www.w3.org/TR/css3-ui/#box-sizing | title=CSS3 Basic User Interface Module | publisher=[[World Wide Web Consortium]]}}</ref> [[Internet Explorer 8]]，[[WebKit]]浏览器如[[Safari]] 5.1+ 和[[Google Chrome]]，[[Opera]] 7.0和以后版本，和[[Konqueror]] 3.3.2和以后版本均支持CSS3的box-sizing属性。基于[[Gecko]]的浏览器如[[Mozilla Firefox]]使用[[专有软件|厂商指定]]的<code>-moz-box-sizing</code>属性以支持相同功能<ref>{{Cite web|url=https://developer.mozilla.org/en/CSS/box-sizing |title=-moz-box-sizing |accessdate=2009-04-11 |work=[[Mozilla Developer Center]] |publisher=[[Mozilla]]|date=11 April 2009 |quote=It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification. }}</ref>。


==备注==
==备注==
第42行： 第42行：
==外部链接==
==外部链接==
* [http://tantek.com/CSS/Examples/boxmodelhack.html Tantek Çelik's description of the "box model hack"]
* [http://tantek.com/CSS/Examples/boxmodelhack.html Tantek Çelik's description of the "box model hack"]
* [http://webdesign.about.com/od/css/a/aaboxmodelhack.htm Getting Internet Explorer to Play Well with CSS] - 在 about.com 的概述了避开盒模型缺陷和其它 IE 问题的各种方式的文章。
* [http://webdesign.about.com/od/css/a/aaboxmodelhack.htm Getting Internet Explorer to Play Well with CSS] - 在about.com的概述了避开盒模型缺陷和其它IE问题的各种方式的文章。
* [http://msdn2.microsoft.com/en-us/library/Bb250496 Cascading Style Sheet Compatibility in Internet Explorer 7] - MSDN article, July 2006.
* [http://msdn2.microsoft.com/en-us/library/Bb250496 Cascading Style Sheet Compatibility in Internet Explorer 7] - MSDN article, July 2006.
* [http://renownedmedia.com/blog/css-box-model-differences-in-firefox-and-internet-explorer/ CSS Box Model differences in Firefox and Internet Explorer] - 对 Mozilla Firefox 与 Internet Explorer 之间渲染方式的差异的进一步解释。
* [http://renownedmedia.com/blog/css-box-model-differences-in-firefox-and-internet-explorer/ CSS Box Model differences in Firefox and Internet Explorer] - 对Mozilla Firefox与Internet Explorer之间渲染方式的差异的进一步解释。


{{Internet Explorer}}
{{Internet Explorer}}

2012年2月10日 (五) 08:19的版本

W3C和Internet Explorer的盒模型解释width属性的差异。

IE盒模型缺陷（英語：Internet Explorer box model bug）是指早期版本的Internet Explorer调整网页元素大小的方法，和W3C为层叠样式表（CSS）语言推荐的标准方式不同。在Internet Explorer 6中，浏览器支持一种解决了这种差异的可选的渲染模式（叫做「遵从标准模式」）。然而，出于向后兼容的原因，所有版本的IE仍然默认表现为通常的，非标准的模式[注 1]。Internet Explorer for Mac不受这种非标准行为影响。

背景

CSS的规范描述了网页的元素如何被图形浏览器展现。CSS1的规范第四节定义了一个给块级元素 - 比如说p和blockquote - 一个宽度和高度，和3个级别的环绕它的框 - padding, border,和margin - 的「格式化模型」[1]。尽管该规范从来没有明确使用过「盒模型」一词，这个词已经被网页开发人员和网页浏览器供应商广泛使用。

在HTML 4和CSS之前，很少HTML元素既支持border也支持padding，所以对一个元素的宽度和高度的定义并不是很有争议。然而，它取决于元素的不同而变化。在HTML，table的width属性定义了一个表格 - 包括其边框 - 的宽度[2]。另一方面，图像（img）的width属性定义的则是这个图像本身（在任何边框之内）的宽度[3]。在早期的那些日子，唯一支持padding属性的元素就是表单元格。表单元格的宽度被定义为「以像素为单位的单元格内容的建议宽度，不包括填充」[4]。

在1996年，CSS[5]为多得多的元素引入了margin, border和padding属性。它通过了一个对margin, border和padding的处理类似于表单元格的，相对于内容的宽度定义[6]。从此这已成为著名的W3C盒模型。

在那时，非常少浏览器供应商严格地实施了W3C盒模型。当时的两种主要浏览器，Netscape 4.0和Internet Explorer 4.0均定义宽度和高度为边框到边框的距离[7]。这已被称为传统[8]或者Internet Explorer盒模型。[9]

缺陷

根据由万维网联盟（W3C）于1996年发行并于1999年修订的CSS1所指定的，当任意一个块级元素的宽度或高度被显式指定，它应当只确定这个可见元素自身的宽度或高度，而padding, border和margin随后被应用。[1][10]Internet Explorer在「quirks模式」则把内容，内边距（padding）和边框（border）全部包括在一个指定的宽度或高度之内；这导致它呈现出一个比遵从标准行为的结果更窄或者更短的盒子。[11]

解决方法

如果页面包含某些HTML文件类型描述，则Internet Explorer 6及以上版本不受该缺陷的影响。然而这些版本由于向后兼容的原因，在quirks模式下维持这种错误的行为。[12]例如，如下会触发quirks模式：

  • 文件类型描述缺失或不完整时；
  • 遇到一个HTML 3或者更早的文档时；
  • 使用HTML 4.0 Transitional或Frameset的文件类型描述且系统标识符（URI）不存在时；
  • 在DOCTYPE声明之前出现SGML注释或者其它无法识别的内容时；
  • 文档任何地方有错误时；
  • Internet Explorer 6也会在DOCTYPE声明之前出现XML声明时使用quirks模式。[13]

各种解决方法已被制定以迫使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的页面出现一些意想不到的问题。[12]

盒模型hacks已证明是不可靠的，因为它们依赖于浏览器对CSS支持的缺陷，而这些缺陷可能会在以后的版本中被修复。由于这个原因，一些网页开发者改以推荐避免对同一个元素既指定width也指定padding或者使用条件注释（en:conditional comment）以及/或CSS filters以解决在较旧版本Internet Explorer上的盒模型缺陷。[14][15]

对Internet Explorer盒模型的支持

网页设计者Doug Bowman说过起初的Internet Explorer盒模型代表了一个更好，更有逻辑性的方法。[16] Peter-Paul Koch则给出了一个物理上盒子的例子，其尺寸总是指盒子自身的，包括可能的内边距 - padding，但是从来不是它的内容。[8]他说这种盒模型对图形化设计者来说更有用，他们创造基于盒子的可见宽度而不是其内容的宽度的设计。[17] Bernie Zimmermann说Internet Explorer盒模型更接近于HTML表格模型中单元格的尺寸和填充。[18]

W3C已在CSS3内包括了一个box-sizing属性。当为一个元素指定box-sizing: border-box;时，该元素的任意padding或border都在指定的width和height的内部，「就像通常旧版HTML用户代理所实施的那样」。[19] 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属性以支持相同功能[20]。

备注

  1. ^ 参见：quirks mode

参考资料

  1. ^ 1.0 1.1 Håkon Wium Lie; Bert Bos. Cascading Style Sheets, level 1. World Wide Web Consortium. 11 January 1999 [2007-06-24]. 
  2. ^ Raggett, Dave. The HTML3 Table Model. World Wide Web Consortium. 23 January 1996 [27 July 210].  RFC 1942 HTML Tables. IETF. The default table width is the space between the current left and right margins. 
  3. ^ Raggett, Dave; Arnaud Le Hors, Ian Jacobs. 13 Objects, Images, and Applets # Width and height. World Wide Web Consortium. 24 December 1999 [27 July 2010]. 
  4. ^ Raggett, Dave. HTML 3.2 Reference Specification. World Wide Web Consortium. 14 January 1997 [2010-07-07]. 
  5. ^ Håkon Wium Lie; Bert Bos. Cascading Style Sheets, level 1. World Wide Web Consortium. 1996 [27 July 2010].  已忽略未知参数|month=（建议使用|date=） (帮助)
  6. ^ Cascading Style Sheets, level 1. World Wide Web Consortium. [2010-07-07]. 
  7. ^ Box model tweaking. CSS2 tests. Xs4all.nl. [2010-07-07]. 
  8. ^ 8.0 8.1 CSS2 - Box model tweaking. Quirksmode.org. [2010-07-07]. 
  9. ^ Johansson, Roger. Internet Explorer and the CSS box model. 21 December 2006 [2008-11-12]. 
  10. ^ Håkon Wium Lie; Bert Bos. Cascading Style Sheets, level 1. World Wide Web Consortium. 17 December 1996 [2006-12-09]. 
  11. ^ Lance Silver. CSS Enhancements in Internet Explorer 6. Microsoft Developer Network. Microsoft. 2001 [2007-06-24].  已忽略未知参数|month=（建议使用|date=） (帮助)
  12. ^ 12.0 12.1 Markus Mielke. Cascading Style Sheet Compatibility in Internet Explorer 7. Microsoft Developer Network. Microsoft. 26 September 2006 [2007-06-24].  "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."
  13. ^ !DOCTYPE. Microsoft Developer Network. Microsoft. [2007-01-13].  "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."
  14. ^ Roger Johansson. Internet Explorer and the CSS box model. 456 Berea Street. 21 December 2006 [2007-01-14]. 
  15. ^ Arve Bersvendsen. Hack-free CSS for IE. Arve Bersvendsen's weblog. 2004 [2007-01-16].  已忽略未知参数|month=（建议使用|date=） (帮助)
  16. ^ Vorsprung durch Webstandards. Vorsprungdurchwebstandards.de. [2010-07-07].  已忽略文本“ Douglas Bowman declares his love to CSS ” (帮助)
  17. ^ Vorsprung durch Webstandards. Vorsprungdurchwebstandards.de. [2010-07-07].  已忽略文本“ Peter-Paul Koch declares his love to CSS ” (帮助)
  18. ^ Box Model Enlightenment, Bernie Zimmermann. Bernzilla.com. 4 April 2003 [2010-07-07]. 
  19. ^ CSS3 Basic User Interface Module. World Wide Web Consortium. 
  20. ^ -moz-box-sizing. Mozilla Developer Center. Mozilla. 11 April 2009 [2009-04-11]. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification. 

外部链接

检索自“https://zh.wikipedia.org/w/index.php?title=IE盒模型缺陷&oldid=19209724”