怪异模式

怪异模式英语quirks mode)是指在计算机领域中,一些网页浏览器为了维持对较旧的网页设计的向后兼容性,而使用的一种技术,有别于严格遵循万维网联盟(W3C)与互联网工程任务组(IETF)标准而设计的“标准模式”。

目录

概述

一个网页的结构与外观由两种标准化的语言的组合所描述:HTML,一种设计用于网页的置标语言,描述页面的结构与内容,和CSS,一种广义的样式表(en:stylesheet) 语言,用以指定页面在不同媒介中(屏幕显示器的视觉样式,打印页面时的打印样式,页面被屏幕阅读器所阅读时的听觉样式等)该如何被渲染。然而,多数旧的网页浏览器没有完全实施这些语言的定义或者在这些定义完成之前就已被开发(比如,Macintosh 平台上的 Microsoft Internet Explorer 版本 5.0 发行于 2000 年,在主流网页浏览器中最早完全支持 CSS Level 1)[1]。结果是,很多更早的网页依赖于早期浏览器不完全或不正确的解析而构造,并且只有在被这样的浏览器处理时才会如设想之中那样渲染。

主流浏览器对标准化的 HTML 和 CSS 的支持已得到了显著的提高,但是旧版的文档中的很大一部分依赖于旧版浏览器的 quirks,对浏览器开发者形成了一个障碍,他们想提高它们对标准化的 HTML 及 CSS 的支持,却同样想对早期的非标准化页面保持向后兼容。此外,很多新的网页继续以旧的方式被建造出来,由于浏览器开发者所引进的兼容性解决方案意味着对标准化方法的理解并不是严格必要的。

为了与可能数量众多的网页维持兼容,现代的网页浏览器一般具有多种渲染模式:在“标准模式”(standards mode) 页面按照 HTML 与 CSS 的定义渲染,而在“quirks 模式”中则尝试模拟更旧的浏览器的行为。一些浏览器(例如,那些基于MozillaGecko 渲染引擎的,或者 Internet Explorer 8strict 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 (以及更早)的旧版 (en) 浏览器相当一致。这意味着使用表格内图像片的布局在“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]

文档类型的比较

Henri Sivonen 编译了一个不同文档类型以及在最常见的浏览器中它们被如何对待的清单,展示了这些情况下,页面是否被渲染为怪异 (Q),标准 (S) 或接近标准 (A) 模式。接近标准模式的判定标准是非标准的表单元格高度的渲染。这个表格应用于Content-Type 为 text/html 的内容。Content-Type 为 application/xhtml+xml 的内容在 Chrome, Firefox,Internet Explorer 9 (以及10), SafariOpera 被渲染为标准模式。Internet Explorer 6, 7 和 8 不支持 application/xhtml+xml 的 Content-Type。[2]

DoctypeNS6Mozilla 0.9.5-1.0IE 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 5Konq 3.2
QQQQQQQ
HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">QQQQQQQ
HTML 4.01
Strict有系统标识符
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
SSS A A A A
无系统标识符
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
SSS A AQ A
Transitional有系统标识符
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
SS A A A AQ
无系统标识符
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
QQQQQQQ
HTML5
<!DOCTYPE html>QSS 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">
SSS 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">
SSS AQ AQ
有系统标识符且无 XML 声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
SSS A A A A
无系统标识符,也无 XML 声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
SSS 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">

SS A AQ AQ
有系统标识符,无 XML 声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
SS A A A AQ
无系统标识符,无 XML 声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
SS 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">
SSS AQ AQ
有系统标识符,无 XML 声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
SSS A A A A
DoctypeNS6Mozilla 0.9.5-1.0IE 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 5Konq 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]

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值