通过 Doctype 启用浏览器模式 【已翻译100%】(1/2)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析DNS,个人版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 为了即能解析那些满足Web标准的网页,又能解析那些过去20年来遗留下来的传统的网页,现代浏览器一般都实现了多种网页解析的模型。本文将介绍这些解析模型都是什么,以及它们是如何触发的。 内容概述 本文档的主要结论是,你应当在你HTML文档(所有以text/html类型处理的内容)的源代码顶部加上<!DOCTYPE html>。

为了即能解析那些满足Web标准的网页,又能解析那些过去20年来遗留下来的传统的网页,现代浏览器一般都实现了多种网页解析的模型。本文将介绍这些解析模型都是什么,以及它们是如何触发的。

内容概述

本文档的主要结论是,你应当在你HTML文档(所有以text/html类型处理的内容)的源代码顶部加上。(详见下文)

如果你还想确保使用IE8/IE9/IE10的用户不做任何操作就可以让网页以IE7的形式显示,你可以在你的服务器上为所有text/html的响应添加HTTP头"X-UA-Compatible: IE=Edge",还可以在HTML文档的head内的最上方加上。然而这将会导致HTML文档不能通过校验(HTML document invalid)。其实即使你不加上这些IE-specific声明,IE大部分情况下的默认行为也是合理的,因此,你也不需要对这些IE-specific过于依赖。(下文将会介绍例外的情况)

本文档的适用范围

本文档几乎覆盖了所有的浏览器,包括以Firefox为代表的Gecko内核的浏览器、以Safari/Chrome为代表的Webkit内核的浏览器、Opera、Konqueror、IE for Mac、IE for Windows/Windows Phone以及那些内嵌IE内核的其它浏览器。下面我们将不再使用这些浏览器引擎的名称,而是以各引擎的典型浏览器的名称来代替。

本文档重点说明的不是这些模式的具体行为,而是它们的选择机制。希望能让你明白如何避免(不小心使用)那些过期的模式,而不是告诉你如何故意使用这些过期的模式实现最佳的行为。

模式介绍

本文将介绍以下这些模式:

适用于text/html类型的常见模式

对text/html类型的内容来说,模式的选择取决于对文档的doctype探测(参见下文的doctype探测章节)。在IE8及更高版本的浏览器中,模式还取决于一些其它因素。在IE8及更高版本浏览器,对于不在微软提供的黑名单上的网站,模式取决于doctype。如果安装了Google Chrome Frame,将会受到另外一些因素的影响,甚至会影响到IE6和IE7。

  • 怪癖模式(Quirks Mode)

在怪癖模式中,为了避免“破坏”那些根据上世纪90年代末流行的实践创作的页面,浏览器违反了现代的Web格式规范。不同的浏览器实现了不同的怪癖行为。以前,不同的浏览器实现了不同的怪癖模式,比如IE6/7/8/9里的怪癖模式就是IE5.5模式,其它浏览器的怪癖模式则是对近乎标准模式的一种修改。最近各浏览器已经开始在它们的怪癖模式里应用相同的行为,尤其要提到的是IE10的怪癖模式已不再模仿IE5.5,而是与其它浏览器的怪癖模式保持一致。目前WHATWG正在制定怪癖模式的标准。

和其它浏览器中的怪癖模式一样,IE10的怪癖模式有时会被称为"互操作性怪癖模式"(interoperable Quirks mode)以与IE10的模仿IE5.5的怪癖模式(Internet Explorer 5 Quirks)进行区别。

如果你正在编写一个新的页面,请使用标准模式,而坚决不要使用怪癖模式。

  • 标准模式(Standards Mode)

标准模式中,这些浏览器将尝试以各自实现的程度规范正确地处理文档。。

不同的浏览器遵循不同的阶段,所以标准模式也不是一个单一目标。

HTML标准中称这种模式为 “非怪癖模式”(no quirks mode)。

  • 近乎标准模式(Almost Standards Mode)

Firefox, Safari, Chrome, Opera (从7.5开始), IE8, IE9 and IE10 还有一个称为近乎标准模式(the Almost Standards mode)的模式,这种模式以传统的方式设定表格的垂直高度,而没有遵从CSS2的标准。Mac IE 5、Windows IE 6/7、Opera prior to 7.5以及Konqueror并不需要该模式,因为这些浏览器的标准模式也没有按照CSS2的标准设定表格的垂直高度。事实上,相对于较新的浏览器的标准模式,它们的标准模式更接近于近乎标准模式。回顾过去, 如果没有"标准模式"与"近乎标准模式"的区别,Web或许会更好,可以默认使用近乎标准模式的行为,再利用样式表特性选择标准模式下的行为。然而,你还是应该用标准模式,而不要用近乎标准模式。HTML标准中称这种模式为有限怪癖。

适用于application/xhtml+xml类型的模式(XML模式)
在Firefox, Safari, Chrome, Opera 和 IE9 里,如果HTTP响应中的Content-type是application/xhtml+xml时会触发XML模式,需要强调的是触发条件是HTTP的Content-type,不是HTML中的元素,也不是HTML的doctype。在XML模式下,这些浏览器将以各自实现的程度规范正确地处理XML文档。

IE6/7/8不支持application/xhtml+xml,Mac版的IE5也不支持。

在基于Webkit的Nokia S60浏览器上,由于考虑到在围墙花园(译者按:walled garden,指的是一个控制用户对网页内容和服务进行访问的环境,围墙花园把用户限制在一个特定的范围内,它允许用户访问指定的内容,同时防止用户访问其他未被允许的内容。)环境下对病态内容的兼容性,application/xhtml+xml的HTTP Content-type并不触发XML模式。因为传统的移动浏览器并没有使用真正的XML解析器,那些病态内容也会被作为XML对待。

我并没有测试 Symbian3上的默认浏览器。

我没有对Konqueror进行过充分的测试,不好说这个浏览器的具体行为。

微软额外提供的一些IE-Specific模式

下面列出了一些额外的IE-specific模式,这些模式并不适用于HTML5,也不适用于其它不支持这些模式的浏览器,它们通过配置来激活,还可以通过"X-UA-Compatibleas"的HTTP头,或者html里的meta元素进行激活。

  • Internet Explorer 5 Quirks

除了互操作性怪癖模式外,IE10还有一个称为Internet Explorer 5 Quirks的模式,它模仿了IE5.5的行为,这种模式在IE6/7/8/9中称为怪癖模式。

  • Internet Explorer 7 Standards

IE8/9/10使用该模式模拟IE7的标准模式。

  • Internet Explorer 8 Standards

IE9/10使用该模式模拟IE8的标准模式。

  • Internet Explorer 8 Almost Standards

IE9/10使用该模式模拟IE8的近乎标准模式行为。在界面上的开发者工具箱中,这个模式与IE8标准模式没什么区别。

  • Internet Explorer 9 Standards

IE9/10使用该模式模拟IE9的标准模式。

  • Internet Explorer 9 Almost Standards

IE10使用该模式模拟IE9的近乎标准模式行为。在界面上的开发者工具箱中,这个模式与IE9标准模式没什么区别。

  • Internet Explorer 9 XML

IE10使用该模式模拟IE9的XML模式行为。在界面上的开发者工具箱中,这个模式与IE9标准模式没什么区别。

值得注意的是,对上一版本的IE的模拟并不够完美,我自己就遇到过一些例子:比如在IE7以上的版本中使用IE7的标准模式对@font-face(像EOT字体)的处理是不同的;还有,在IE10的IE9模式下CSS的2D变换是不需要-ms-前缀的,但是真正的IE9却需要该前缀。如果你认同本文给出的建议,请不要过于关注这些模式,这些兼容模式也将不会对你的产品带来不好的影响。然而对于快捷测试来说,相对于在虚拟机中使用老版本的IE进行测试,还不如在一个较新的IE上使用不同的兼容模式进行测试。

另外,IE10的Windows Phone版与Windows桌面版相同,都有上面所说的这些模式。

Google额外提供的一些IE-Specific模式

当安装了Google Chrome Frame后,IE6/7/8/9(不包括Windows8以及2013年2月的Windows7上的IE10)还可提供以下这些额外的模式。

  • Chrome Quirks

此模式相当于Google Chrome上的怪癖模式。

  • Chrome Standards

此模式相当于Google Chrome上的标准模式。

  • Chrome Almost Standards

此模式相当于Google Chrome上的近乎标准模式。

非Web模式

有些模式还提供了一些与Web内容不相关的模式。在这里提到这些模式仅仅出于对此文档的完整性考虑。包括Opera的WML2.0模式,Mac OS X 10.5上WebKit浏览器上的特殊模式(用于传统的Dashboard widgets,或许这个模式目前仍有更新,我没有考察不是很确定)。以及为Mac OS X上内嵌WebKit浏览器的应用程序单独提供的模式。

模式的影响

模式的主要影响如下:

页面布局

除IE外,对于text/html类型的模式主要影响样式表布局以及样式系统。例如,表格内不会继承样式表;在IE和Opera的老版本中的怪癖模式下,盒模型变成了IE5.5的盒模型。本文档并不会枚举所有的怪癖布局,你可以查阅 Mozilla文档 以及 怪癖模式标准 获得完整列表。

在近乎标准模式中(在所有包含此模式的浏览器中),仅含有图片的单元格高度的计算方式与标准模式不同。

在XML模式中,选择器对查询条件的大小写有不相同的处理行为,另外,对于那些没有实现更多的样式表规范的老版本浏览器中,并不包含对body元素的特殊规则。

内容解析

也有一些差异会影响到HTML和CSS的解析,并且可能会导致一些正常的页面被错误的解析。 这些差异会随着对布局的影响而同时产生影响。重要是要知道怪癖模式和标准模式的主要差别在于CSS布局和CSS的解析,而不是对HTML的解析。对于已经兼容HTML5的浏览器,也有一些关于HTML解析的差异。

一些人会把标准模式误认为是“严格解析模式”,他们会觉得这样的话,浏览器会强制遵守HTML语法规则,会对HTML标记的正确性进行评估。事实上既然在标准模式下,浏览器仍会对HTML标签进行必要的修复。(2000年夏,Netscape 6 发布前,Gecko浏览器确实包含一些强制按HTML语法规则进行解析的模式,其中一种模式称为“标准定义”,这些模式并不能兼容目前的网页内容,已经过期了。)

另外一个常见的误解是关于解析XHTML的。大家通常认为声明为XHTML的doctype会带来不同的解析。事实上XHTML文档也是text/html类型的,也只是“蛋花标签汤”而已,到处都是额外的斜线》只有文档以XML类型(如application/xhtml+xml或application/xml)输出时才会触发与HTML解析完全不同的XML模式的解析。

脚本

虽然怪癖模式主要影响的是CSS,但是还有一些脚本也会受到影响。直到Firefox14,其近乎标准模式下,还是不能直接使用标签的ID来引用标签对象。在Firefox的怪癖模式中有document.all对象,但是在其它模式中却没有该对象。当在IE中模拟低版本IE时,这些影响更搞笑。

在XML模式中,一些DOM API表现很不一样,因为对XML的DOM API与HTML是完全不同的,唉,实在很遗憾。

相关文章
|
8月前
|
编译器
浏览器内置的翻译插件坏了---重启解决
浏览器内置的翻译插件坏了---重启解决
59 0
|
10月前
|
Web App开发 Windows
让网页自动调用双核浏览器的极速模式
让网页自动调用双核浏览器的极速模式
80 0
|
1月前
|
Web App开发
在HTML中用meta控制浏览器默认模式
在HTML文档的`&lt;head&gt;`标签中,通过添加不同的`&lt;meta&gt;`标签可指定浏览器默认使用的内核。使用`&lt;meta name=&quot;renderer&quot; content=&quot;webkit&quot;&gt;
30 1
|
2月前
|
Web App开发 数据可视化 测试技术
Selenium Headless模式:无头浏览器的使用与优势
Selenium Headless模式是无界面的自动化测试方式,适用于Chrome和Firefox等浏览器,提供更快的速度、更高的隐秘性和资源节省。在Python中启用该模式,需导入Options并设置相关参数。示例代码展示了如何在无头模式下访问网站、执行点击和输入操作。这种模式提升了测试效率和稳定性,尤其适合大规模测试和CI环境。
197 1
|
2月前
|
Web App开发 Windows
Windows【Chrome浏览器 02】Auto Dark Mode for Web Contents 无需安装插件开启chrome浏览器黑暗模式
Windows【Chrome浏览器 02】Auto Dark Mode for Web Contents 无需安装插件开启chrome浏览器黑暗模式
220 0
|
2月前
|
JavaScript
sgSpeedMode.js判断360浏览器是“兼容模式”,提示使用“极速模式”
sgSpeedMode.js判断360浏览器是“兼容模式”,提示使用“极速模式”
|
开发者
【浏览器按F12打不开开发者工具(兼容模式打开处)】
【浏览器按F12打不开开发者工具(兼容模式打开处)】
214 0
【浏览器按F12打不开开发者工具(兼容模式打开处)】
|
Web App开发 Windows
Windows系统如何解决Chrome浏览器 自带的翻译插件 无效,无响应等问题
Windows系统如何解决Chrome浏览器 自带的翻译插件 无效,无响应等问题
|
网络协议
最新谷歌浏览器修复谷歌翻译方法
最新谷歌浏览器修复谷歌翻译方法
373 0
|
数据采集 Web App开发 编解码
在 Linux 服务器中创建假桌面运行模拟浏览器有头模式
在 Linux 服务器中创建假桌面运行模拟浏览器有头模式
157 0