fbpx
维基百科

IE盒模型缺陷

二月 04, 2024

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]。

W3C和Internet Explorer的盒模型解释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]。

注释 编辑

  1. ^ 参见：quirks mode

参考文献 编辑

  1. ^ Interoperable HTML5 Quirks Mode in IE10 （页面存档备份，存于互联网档案馆）, IE Blog, MSDN
  2. ^ 2.0 2.1 Håkon Wium Lie; Bert Bos. . World Wide Web Consortium. 1999-01-11 [2007-06-24]. （原始内容存档于2014-04-09）. 
  3. ^ 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. 
  4. ^ 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）. 
  5. ^ Raggett, Dave. . World Wide Web Consortium. 1997-01-14 [2010-07-07]. （原始内容存档于2010-06-19）. 
  6. ^ Håkon Wium Lie; Bert Bos. Cascading Style Sheets, level 1. World Wide Web Consortium. Dec 1996 [2010-07-27]. （原始内容于2009-04-01）. 
  7. ^ Cascading Style Sheets, level 1. World Wide Web Consortium. [2010-07-07]. （原始内容于2010-05-27）. 
  8. ^ Box model tweaking. CSS2 tests. Xs4all.nl. [2010-07-07]. （原始内容于2009-08-23）. 
  9. ^ 9.0 9.1 CSS2 - Box model tweaking. Quirksmode.org. [2010-07-07]. （原始内容于2010-06-29）. 
  10. ^ Johansson, Roger. Internet Explorer and the CSS box model. 2006-12-21 [2008-11-12]. （原始内容于2008-11-07）. 
  11. ^ Håkon Wium Lie; Bert Bos. Cascading Style Sheets, level 1. World Wide Web Consortium. 1996-12-17 [2006-12-09]. （原始内容于2006-12-19）. 
  12. ^ Lance Silver. CSS Enhancements in Internet Explorer 6. Microsoft Developer Network. Microsoft. March 2001 [2007-06-24]. （原始内容于2007-07-01）. 
  13. ^ 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."
  14. ^ !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."
  15. ^ Roger Johansson. Internet Explorer and the CSS box model. 456 Berea Street. 2006-12-21 [2007-01-14]. （原始内容于2007-01-15）. 
  16. ^ Arve Bersvendsen. . Arve Bersvendsen's weblog. February 2004 [2007-01-16]. （原始内容存档于2007-01-15）. 
  17. ^ . Vorsprungdurchwebstandards.de. [2010-07-07]. （原始内容存档于2010-06-14）. 
  18. ^ . Vorsprungdurchwebstandards.de. [2010-07-07]. （原始内容存档于2010-02-27）. 
  19. ^ . Bernzilla.com. 2003-04-04 [2010-07-07]. （原始内容存档于2010-12-27）. 
  20. ^ CSS3 Basic User Interface Module. World Wide Web Consortium. [2012-02-09]. （原始内容于2010-12-01）. 
  21. ^ -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"（页面存档备份，存于互联网档案馆）
  • - 在about.com的概述了避开盒模型缺陷和其它IE问题的各种方式的文章。
  • Cascading Style Sheet Compatibility in Internet Explorer 7（页面存档备份，存于互联网档案馆） - MSDN article, July 2006.
  • - 对Mozilla Firefox与Internet Explorer之间渲染方式的差异的进一步解释。

二月 04, 2024
ie盒模型缺陷, 此條目之中立性有争议, 其內容, 語調可能帶有明顯的個人觀點或地方色彩, 2020年9月28日, 加上此模板的編輯者需在討論頁說明此文中立性有爭議的原因, 以便讓各編輯者討論和改善, 在編輯之前請務必察看讨论页, 此條目需要更新, 2020年9月28日, 請更新本文以反映近況和新增内容, 完成修改後請移除本模板, 英語, internet, explorer, model, 是指早期版本的internet, explorer调整网页元素大小的方法, 和w3c为层叠样式表, 语言推荐的标准方式不同,. 此條目之中立性有争议 其內容 語調可能帶有明顯的個人觀點或地方色彩 2020年9月28日 加上此模板的編輯者需在討論頁說明此文中立性有爭議的原因 以便讓各編輯者討論和改善 在編輯之前請務必察看讨论页 此條目需要更新 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 W3C和Internet Explorer的盒模型解释width属性的差异 层叠样式表CSS動畫 IE盒模型缺陷 CSS filter 无表格网页设计 响应式网页设计 维基教科书本模板 查看讨论编辑 目录 1 背景 2 缺陷 3 解决方法 4 对Internet Explorer盒模型的支持 5 注释 6 参考文献 7 外部链接背景 编辑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 Celik 一个工作于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 Hakon Wium Lie Bert Bos Cascading Style Sheets level 1 World Wide Web Consortium 1999 01 11 2007 06 24 原始内容存档于2014 04 09 引文使用过时参数coauthors 帮助 Raggett Dave The HTML3 Table Model World Wide Web Consortium 1996 01 23 210 07 27 原始内容存档于2012 01 03 请检查 access date 中的日期值 帮助 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 引文使用过时参数coauthors 帮助 Raggett Dave HTML 3 2 Reference Specification World Wide Web Consortium 1997 01 14 2010 07 07 原始内容存档于2010 06 19 Hakon Wium Lie Bert Bos Cascading Style Sheets level 1 World Wide Web Consortium Dec 1996 2010 07 27 原始内容存档于2009 04 01 引文使用过时参数coauthors 帮助 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 Hakon Wium Lie Bert Bos Cascading Style Sheets level 1 World Wide Web Consortium 1996 12 17 2006 12 09 原始内容存档于2006 12 19 引文使用过时参数coauthors 帮助 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 Celik 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之间渲染方式的差异的进一步解释 取自 https zh wikipedia org w index php title IE盒模型缺陷 amp oldid 71609610, 维基百科，wiki，书籍，书籍，图书馆，

文章

，阅读，下载，免费，免费下载，mp3，视频，mp4，3gp， jpg，jpeg，gif，png，图片，音乐，歌曲，电影，书籍，游戏，游戏。