怪异模式
| HTML |
|---|
| 比较 |
怪异模式（英語：quirks mode）是指在计算机领域中，一些网页浏览器为了维持对较旧的网页设计的向后兼容性，而使用的一种技术，有别于严格遵循万维网联盟（W3C）与互联网工程任务组（IETF）标准而设计的「标准模式」。
概述
一个网页的结构与外观由两种标准化的语言的组合所描述：HTML，一种设计用于网页的置标语言，描述页面的结构与内容，和CSS，一种广义的样式表语言，用以指定页面在不同媒介中（屏幕显示器的视觉样式，打印页面时的打印样式，页面被屏幕阅读器所阅读时的听觉样式等）该如何被渲染。然而，多数旧的网页浏览器没有完全实施这些语言的定义或者在这些定义完成之前就已被开发（比如，Macintosh平台上的Microsoft Internet Explorer版本5.0发行于2000年，在主流网页浏览器中最早完全支持CSS Level 1）[1]。结果是，很多更早的网页依赖于早期浏览器不完全或不正确的解析而构造，并且只有在被这样的浏览器处理时才会如设想之中那样渲染。
主流浏览器对标准化的HTML和CSS的支持已得到了显著的提高，但是旧版的文档中的很大一部分依赖于旧版浏览器的quirks，对浏览器开发者形成了一个障碍，他们想提高它们对标准化的HTML及CSS的支持，却同样想对早期的非标准化页面保持向后兼容。此外，很多新的网页继续以旧的方式被建造出来，由于浏览器开发者所引进的兼容性解决方案意味着对标准化方法的理解并不是严格必要的。
为了与可能数量众多的网页维持兼容，现代的网页浏览器一般具有多种渲染模式：在「标准模式」（standards mode）页面按照HTML与CSS的定义渲染，而在「quirks模式」中则尝试模拟更旧的浏览器的行为。一些浏览器（例如，那些基于Mozilla的Gecko渲染引擎的，或者Internet Explorer 8在strict mode下）也使用一种尝试于这两者之间妥协的「近乎标准」（almost standards）模式，实施了一种表单元格尺寸的怪异行为，除此之外符合标准定义。[2]
模式之间的差异和示例
在quirks模式和标准模式之间一个突出的不同是对CSS IE盒模型缺陷的处理。在第6版之前，Internet Explorer曾经使用一种决定一个元素的盒模型的宽度和高度的，与CSS规范所指定相冲突的算法，而且由于Internet Explorer的流行，很多依赖于这种不正确的算法的网页被创建。而在版本6, Internet Explorer在标准模式下渲染时使用了CSS规范的算法，而在quirks模式下使用先前的，不规范的算法。
另一个值得一提的不同点是某些行内（inline）元素的垂直对齐；很多早期的浏览器对齐图片至包含它们的盒子的下边框，虽然CSS的规范要求它们被对齐至盒内文本的基线。标准模式下，基于Gecko的浏览器将会对齐至基线，而在quirks模式下它们会对齐至底部。[3]
此外，很多早期的浏览器对表格内部的字体样式不实施继承；结果是，字体样式必须为整个文档作为一个整体指定一次，并且为表格再次指定一次，尽管CSS规范要求字体样式被继承进表格。如果字号使用相对单位指定，一个标准兼容的浏览器会继承基准字号，然后应用于表格内的相对字号：比如，一个声明了基准字号为80%的页面内声明表格为80%（以保证在不正确继承字号的浏览器中有80%的字号）的字号将会，在一个标准兼容的浏览器里，显示具有64%字号的表格。结果是，浏览器在怪异模式典型的不对表格继承字号。.[4]
接近标准模式
根据CSS2的规范维持了「传统的」表单元格的垂直方向大小调整的叫做「接近标准模式」（almost standards mode）或者「严格模式」（strict mode）的第三种兼容性模式，已被在这些浏览器中实施：Safari, Opera 7.5（和以上），所有基于Gecko（自1.0.1）的浏览器（比如Firefox）和Internet Explorer 8。[2]
「接近标准」模式的渲染和「标准」模式除了一点之外，在所有细节上相匹配。表单元格内部图片的布局采用和「quirks」模式相同的方式被处理，而不是按照标准，这点和例如Internet Explorer 7（以及更早）的舊有浏览器相当一致。这意味着使用表格内图像片的布局在「quirks」或「接近标准」模式下的浏览器中，比起「标准」模式下，更不至于分崩离析。[5]
触发不同渲染模式
通常，浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式；如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，而如果它缺失则浏览器将会采用怪异模式。例如，一个以如下DOCTYPE开始的网页将会触发标准模式：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
如下DOCTYPE语法上是无效的，因为它包含公共标识符关键字PUBLIC却没有公共标识符（指示所用HTML版本的名称），也没有HTML文档类型定义的系统标识符URL。这将会触发怪异模式：
<!DOCTYPE html PUBLIC>
此外，一个不含任何DOCTYPE的网页将会以quirks模式渲染。
对此一个值得一提的例外是微软的Internet Explorer 6浏览器，如果DOCTYPE之前有一个XML声明，不管是否指定完整的DOCTYPE，它就会以quirks模式渲染一个页面。因此以如下代码开始的XHTML页面会被IE 6渲染为quirks模式：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
在一定程度上，上述代码是有用的，然而它仅仅会对IE 6触发怪异模式。
如果DOCTYPE之前有任何语句，quirks模式在任何版本的IE中（截至IE 9）同样会被触发。例如，如果一个超文本文件在DOCTYPE前包含一个注释或者任何标签，IE（截至9）会使用quirks模式：
<!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XML声明的问题在Internet Explorer 7中被解决了，在此XML声明只是简单的被忽略。[6]然而，为对现存和更早的网页浏览器的最大程度的兼容，万维网联盟，维持XML规范的组织，建议XHTML文件的作者可以考虑省略XML声明。[7]
文档类型的比较
 | 此條目需要更新。 (2013年12月24日) |
Henri Sivonen编译了一个不同文档类型以及在最常见的浏览器中它们被如何对待的清单，展示了这些情况下，页面是否被渲染为怪异（Q），标准（S）或接近标准（A）模式。接近标准模式的判定标准是非标准的表单元格高度的渲染。这个表格应用于Content-Type为text/html的内容。Content-Type为application/xhtml+xml的内容在Chrome, Firefox, Internet Explorer 9（以及10）, Safari和Opera被渲染为标准模式。Internet Explorer 6, 7和8不支持application/xhtml+xml的Content-Type。[2]
| Doctype | NS6 | Mozilla 0.9.5-1.0 | IE 8+ Firefox Chrome Safari Opera 7.5+ Netscape 7+ Mozilla 1.0.1+ Konq 3.5+ HTML5 spec |
IE 7 Opera 7.10 |
IE 6 Opera 7.0 |
Mac IE 5 | Konq 3.2 | |||
|---|---|---|---|---|---|---|---|---|---|---|
| 无 | Q | Q | Q | Q | Q | Q | Q | |||
| HTML 3.2 | ||||||||||
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> | Q | Q | Q | Q | Q | Q | Q | |||
| HTML 4.01 | ||||||||||
| Strict | 有系统标识符 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
S | S | S | A | A | A | A | ||
| 无系统标识符 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
S | S | S | A | A | Q | A | |||
| Transitional | 有系统标识符 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
S | S | A | A | A | A | Q | ||
| 无系统标识符 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
Q | Q | Q | Q | Q | Q | Q | |||
| HTML5 | ||||||||||
| <!DOCTYPE html> | Q | S | S | A | A | A | ? | |||
| XHTML Basic | ||||||||||
| 有系统标识符且无XML声明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> |
S | S | S | A | A | A | A | |||
| XHTML 1.0 | ||||||||||
| Strict | 有系统标识符和XML声明 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
S | S | S | A | Q | A | Q | ||
| 有系统标识符且无XML声明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
S | S | S | A | A | A | A | |||
| 无系统标识符，也无XML声明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> |
S | S | S | A | A | A | ? | |||
| Transitional | 有系统标识符且有XML声明 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
S | S | A | A | Q | A | Q | ||
| 有系统标识符，无XML声明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
S | S | A | A | A | A | Q | |||
| 无系统标识符，无XML声明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> |
S | S | A | A | A | A | ? | |||
| XHTML 1.1 | ||||||||||
| 有系统标识符和XML声明 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
S | S | S | A | Q | A | Q | |||
| 有系统标识符，无XML声明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
S | S | S | A | A | A | A | |||
| Doctype | NS6 | Mozilla 0.9.5-1.0 | IE 8+ Firefox Chrome Safari Opera 7.5+ Netscape 7+ Mozilla 1.0.1+ Konq 3.5+ HTML5 spec |
IE 7 Opera 7.10 |
IE 6 Opera 7.0 |
Mac IE 5 | Konq 3.2 | |||
模式验证
在绝大多数浏览器，文档对象模型的扩展document.compatMode指示当前页面的渲染模式。在标准模式和接近标准模式，document.compatMode包含值CSS1Compat，然而在怪异模式该值为BackCompat。[8]
此外，在Mozilla Firefox和Opera一个给定页面的渲染模式也被指示在「页面信息」的信息框中。而在Internet Explorer 8及更高版本的IE中，文档模式被显示于Internet Explorer开发人员工具中，且可以被用户更改。[9]在Internet Explorer中还有document.documentMode的私有JavaScript扩展，其取值为5, 7, 8, 9, 10之一的浮点型变量。[10][11]
参考文献
- ^ Cascading Style Sheets: CSS Browsers. 19 December 2001 [27 May 2007]. （原始内容存档于2018-07-06）.
- ^ 2.0 2.1 2.2 Sivonen, Henri. Activating Browser Modes with Doctype. [15 March 2011]. （原始内容存档于2011-03-14）.
- ^ Images, Tables, and Mysterious Gaps. Mozilla Developer Center. [27 May 2007]. （原始内容存档于2017-05-22）.
- ^ Fixing Table Inheritance in Quirks Mode. Mozilla Developer Center. [27 May 2007]. （原始内容存档于2016-03-03）.
- ^ Gecko's "Almost Standards" Mode. Mozilla Developer Center. [27 May 2007]. （原始内容存档于2007-07-13）.
- ^ Wilson, Chris. The <?xml> prolog, strict mode, and XHTML in IE. 15 August 2005 [27 May 2007]. （原始内容存档于2010-01-18）.
- ^ HTML Compatibility Guidelines. XHTML 1.0 The Extensible HyperText Markup Language (Second Edition). World Wide Web Consortium. 1 August 2002 [14 February 2009]. （原始内容存档于2021-03-20）.
- ^ Koch, Peter-Paul. Miscellaneous. W3C DOM Compatibility - HTML. QuirksMode. 2 February 2009 [14 February 2009]. （原始内容存档于2014-08-27）.
- ^ IE9’s Document Modes and JavaScript （页面存档备份，存于互联网档案馆） - IEBlog - Site Home - MSDN Blogs
- ^ documentMode property. [2012-04-06]. （原始内容存档于2015-01-18）.
- ^ HTML DOM Document documentMode Property （页面存档备份，存于互联网档案馆）, W3Schools
外部链接
- Eric Meyer on CSS: Picking a Rendering Mode （页面存档备份，存于互联网档案馆）
- Quirksmode.org: Quirks mode and strict mode （页面存档备份，存于互联网档案馆）
- Documentation for quirks mode in Mozilla-based browsers （页面存档备份，存于互联网档案馆）
- Opera Software's explanation of quirks mode in their browser
- The W3C Markup Validation Service （页面存档备份，存于互联网档案馆）
- Bookmarklet that reports the mode of a document （页面存档备份，存于互联网档案馆）
- MDC explanation of Mozilla's DOCTYPE sniffing （页面存档备份，存于互联网档案馆）
- Testing doctype handling in browser （页面存档备份，存于互联网档案馆）
- Joel Spolsky on Web standards （页面存档备份，存于互联网档案馆）