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

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

内容概述

本文档的主要结论是,你应当在你HTML文档(所有以text/html类型处理的内容)的源代码顶部加上<!DOCTYPE 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是完全不同的,唉,实在很遗憾。

时间: 2024-09-01 05:56:30

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

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

doctype嗅探(也叫doctype转换) 现代浏览器使用doctype嗅探来决定text/html文档的引擎模式.这意味着模式的选择是基于HTML文档开始的文档类型声明(或缺少).(这不适于使用XML文档类型的文档.) 文档类型声明(doctype)是SGML的语法伪造,SGML是个旧式的标记框架,HTML5之前的HTML就是依据其定义的.HTML4.01规范中,文档类型声明描述的是HTML的版本信息.尽管名字叫"文档类型声明"且HTML 4.01规范所描述的是关于"版本

DOCTYPE 探索 【已翻译100%】(1/2)

介绍 最近在我学习HTML5的时候,心里想到的第一个问题就是浏览器怎么会知道,我们编写的HTML是否兼容HTML v4.1或者HTML v5呢. 为了找到对相同查询的回复,我开始了我的探索,这里我想分享对此的一些了解. 研究这个东西的时候,我了解到所有这些都是由一个叫做 <!DOCTYPE> 的标签来控制的,它是大多数网页的最开头的一个标签,真正令我感觉惊奇的事情,则是因为我看到每一个web页面不管何时被某个IDE添加,都会自动添加上这个标签,而我也从未关心过这个标签,也从未想过要去研究研究它

DOCTYPE 探索 【已翻译100%】(2/2)

错误的""怎样使HTML无效的? 定义一个错误的DOCTYPE会使Web页面无效.例如,当我们开发一个页面,如果某人将DOCTYPE定义为Strict,并且还是用了废弃的元素像是"font",那么这个元素会使得页面无效,或者我们使用了标签,而且没有为这个标签定义"Alt"属性,这同样会使页面无效,因为根据Strict DTD,"Alt"属性是标签的必选属性. 如何验证页面是否有效? W3C 拥有一个让你可以根据定义的"

从 C++ 到 Objective-C 的快速指南 【已翻译100%】

**简介 ** 当我开始为iOS写代码的时候,我意识到,作为一个C++开发者,我必须花费更多的时间来弄清楚Objective-C中怪异的东西.这就是一个帮助C++专家的快速指南,能够使他们快速的掌握Apple的iOS语言. 请注意这绝不是一个完整的指南,但是它让你避免了阅读100页的手册.除此之外,我知道你喜欢我的写作风格. 背景 需要C++的技能,我会比较C++和Objective-C的东西.此外,COM编程也是有用的,因为Objective-C有类似于IUnkown的东西,因此基础的COM编

50 个 jQuery 插件可将你的网站带到另外一个高度 【已翻译100%】

Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力. 关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性--除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间. 通过浏览文档,掌握JQuery的语法是很容易的.它可以支持选择DOM元素,创

Ext JS 5 对平板的支持 【已翻译100%】

Ext JS 已经被公认为桌面web应用的领衔框架. 计算机应用市场,无论是在个人还是企业领域,都因为平板开始挑战全球个人PC的销售量而变得云诡波谲起来. Sencha 认识到了这种变化,并在其 Ext JS 5 中退出了新的特性和功能优化. Ext JS 5 从 Sencha Touch 2 那里学到了一堆的新花样. 多年在最佳移动web应用框架领域的经验集于一身,使得其在台式机上面的产品也能在现在平板上得到完美的呈现. 我们可以从整个全线的更新中看到这些更新 - 类系统,事件管理,小窗口,还

AngularJS —— 使用模块组织你的代码 【已翻译100%】(2/3)

函数是一个对象:它创建了范围 这是因为现在你已经把isDoingWork这个变量创建在了一个函数里面 -- 也就是我们们的匿名 IIFE 中 -- 而如此这个变量就只能通过这个函数才能访问到. 有趣的是Javascript中的所有函数都是第一类对象. 那很简明的意味着函数是一个对象,它可能通过一个变量被访问到. 或者说,另外一种描述的方式是你存储了指向 函数的一个引用,并在稍后的某个时间获取其变量. 在我们第一个示例中,我们的问题是并没有保存一个指向我们匿名函数的引用,所以我们永远也不能再获取到

复制策略与复制的方式 【已翻译100%】(2/2)

服务器宕机意味着相关的日志变化部分会在尺度上增加,直到同伴节点再次运行起来,或者我们从复制目标中移除这个服务器条目. 到目前为止,这与你要组织 oplog 的方式非常相似.主要的不同是,组织需要记录的真实数据的方式.从 oplog 角度看,你准备向系统中写入发生的变化.并且,对之施行的唯一方式就是以它产生的相同顺序将其应用到 oplog 中.这会导致你只能一直拥有一个单主节点的系统.并且会引发在"大脑分裂"时数据丢失或需要手工合并的场景. 就多重可写组合而言,我们要保持足够的上下文(通

AngularJS 中的友好 URL —— 移除URL 中的 # 【已翻译100%】

AngularJS 默认将会使用一个 # 号来对URL进行路由. 例如: http://example.com/ http://example.com/#/about http://example.com/#/contact 要获得干净的URL并将井号从URL中移除是很容易的. 完成两件事情就行了. 1.配置 $locationProvider 2.设置我们的相对连接的起点路径 $location 服务 在Angular中, $location服务会解析地址栏中的URL,并对你的应用程序作出改变