doctype 浏览器模式详解
-
模式
-
-
怪癖模式(Quirks Mode)
- 怪癖模式中,为了避免“破坏”那些根据盛行于20世纪90年代末的旧时实践创作的页面,浏览器违背了当代的Web格式规范。不同的浏览器实现了不同的怪癖行为。Internet Explorer6、7和8中,怪癖模式有效地冻结在IE5.5 。其他浏览器中,怪癖模式是对几乎标准模式的少量偏移。
- 如果正在创作新网页,你应该符合相关的规范(特别是CSS2.1)且使用标准模式。
- 标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
- 不同的浏览器遵循不同的阶段,所以标准模式也不是一个单一目标。
- HTML5把这种模式叫“非怪癖模式(no quirks mode)”
-
-
几乎标准模式(Almost Standards Mode)
- irefox、Safari、Chrome、Opera(从7.5开始)和IE8也有个叫“几乎标准模式”的模式,它按照传统的做法来实现表格单元格的垂直尺寸而不是严格的遵照CSS2规范。Mac IE5、Windows IE6和7、Opera7.5以前版本和Konqueror无需几乎标准模式,因为它们至少没有在各自的标准模式下严格遵循CSS2规范来实现表格单元格垂直尺寸。实际上,它们的标准模式更接近Mozilla的几乎标准模式而不是Mozilla的标准模式。
- HTML5把这种模式叫着“受限怪癖模式(limited quirks mode)”。
-
IE8有个模式主要是冻结了IE7标准模式的副本。其他浏览器没有像这样的模式,且该模式也未被HTML5指定。
<!DOCTYPE html>
- 如果想验证诸如
<video>
、<canvas>
和ARIA这样的新特性,那么这样做是对的。注意,HTML5的有效定义依旧在变化中,请确保在Firefox、Safari、Chrome、Opera9或Opera10中测试图像 - 对齐。在Internet Explorer中测试图像对齐是不足够的,无论如何请确保在IE8中也进行了测试。
标准模式(Standards Mode)
IE7模式
选择doctype
标准模式,最前沿的验证
标准模式,更稳定的验证目标
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
这个doctype也会触发标准模式,且10岁大的HTML4.01有效定义是稳定的。请确保在Firefox、Safari、Chrome、 Opera9或Opera10中测试图像对齐。
在Internet Explorer中测试图像对齐是不足够的,无论如何请确保在IE8中也进行了测试。
- 要使用标准模式,但仍要验证不推荐标记或在表格布局中使用切片图像且不想去修复它们。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 它会触发几乎标准模式(和老掉牙的Mozilla中的完全标准模式full Standards mode)。请注意,如果以后移植到HTML5上,基于利用表格实现的切片图像的布局可能会被破坏(且完整标准模式也如此)。
- 故意要使用怪癖模式
- 没有doctype。
- 请别这样做。故意为怪癖模式所做的设计将会困扰你,在将来你的同事或继任者甚至没有人关心Windows IE6(Netscape4.x和IE5已经没有人关心了)。为怪癖模式设计是个坏主意。相信我。
- 如果你想依旧支持Windows IE6,对它做一个特别的hack使用条件注释比使其他浏览器退步到怪癖模式好。
- 作者没有设置X-UA-Compatible HTTP头
- 作者没有设置X-UA-Compatible meta标签
- 微软没有在黑名单中放置该站点的域名
- 局域网管理员没有把该站点放置到黑名单上
- 用户没有按下兼容视图按钮(Compatibility View button) (或以其他方式添加到某个特定的用户黑名单中)
- 该站点不在局域网域中
- 用户没有选择在IE7中显示所有站点
- 页面没有通过frame嵌入到兼容模式的页面中
- 你的域名没有在微软的黑名单上
- 你不需要包括X-UA-Compatible HTTP头或meta标签。
- 你的域名在微软的黑名单中
- 在你的页面包含后面的meta元素(它在HTML5中是非法的)
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
(在任何脚本元素前),或者设置后面的HTTP头:X-UA-Compatible: IE=Edge - 你的站点在IE7中工作但在IE8中破坏
- 在你的页面包含后面的meta元素(它在HTML5中是非法的) (在任何脚本元素前),或者设置后面的HTTP头: X-UA-Compatible: IE=EmulateIE7,然后修复你的站点不依赖非标准的IE7行为和迁移到IE=Edge。
- 开始进入:
- X-UA-Compatible meta?
- IE=7:使用IE7标准
- IE=EmulateIE7: 进入“怪癖或无doctype?(兼容模式)”
- IE=IE8 或 IE=IE7 或 IE=a 或 IE=EmulateIE8 或没有或首先出现 script:进入”X-UA-Compatible HTTP头?”
- IE=8 或 IE=Edge 或 IE=99 或 IE=9.9:进入“几乎标准模式?”
- IE=5:使用怪癖模式(IE5.5)
- X-UA-Compatible HTTP头?
- IE=7:使用IE7标准模式
- IE=EmulateIE7:进入“怪癖或无doctype?(兼容模式)”
- IE=IE8 或 IE=IE7 或 IE=a 或 IE=EmulateIE8 或没有:进入“显示所有站点…预设置?”
- IE=8 或 IE=Edge 或 IE=99 或 IE=9.9:进入“几乎标准模式?”
- IE=5:使用怪癖模式(IE5.5)
- 怪癖模式或无doctype?(兼容模式)
- 是:使用怪癖模式(IE5.5)
- 否:使用IE7标准模式
- 显示所有站点…预设置?
- 是:进入“怪癖模式或无doctype?(兼容模式)”
- 否:进入“显示局域网站点…预设置?”
- 显示局域网站点…预设置?
- 是:进入“站点位于局域网域?”
- 否:进入“域名在微软维护的名单上?”
- 域名在微软维护的名单上?
- 是:进入“怪癖模式或无doctype?(兼容模式)”
- 否:进入“被兼容模式页面用Frame嵌入?”
- 被兼容模式页面用Frame嵌入?
- 是:进入“怪癖模式或无doctype?(兼容模式)”
- 否:进入“按下了兼容模式按钮?”
- 按下了兼容模式按钮?
- 是:进入“怪癖模式或无doctype?(兼容模式)”
- 否:进入“怪癖模式或无doctype?(IE8)”
- 怪癖模式或无doctype?(IE8)
- 是:进入“使用怪癖模式(IE5.5)”
- 否:进入“几乎标准模式?”
- 几乎标准模式?
- 是:使用IE8几乎标准模式
- 否:使用IE8标准模式
不推荐任何的XHTML doctype,因为XHTML被用作text/html被认为是有害的。无论如何,如果你选择使用XHTML doctype,请注意XML声明会使IE6(但不是IE7!)触发怪癖模式。
IE8 并发症
IE8有4种模式:IE5.5怪癖模式、IE7标准模式、IE8 几乎标准模式 和IE8标准模式。
模式的选择取决于来自几个方面的数据:doctype、meta元素、HTTP头、来自微软的定期下载数据、局域网域、用户所做设置、局域网管理员所做设置、父框架的模式(如果有)和地址栏兼容视图按钮被用户触发。(对于嵌入该引擎的其他应用,模式也取决于嵌入的应用。)
幸运的是如果出现下列情况,IE8大体上会像其他浏览器一样使用doctype嗅探:
上述除两个关于X-UA-Compatible的情况外,IE8像IE7一样执行doctype嗅探。IE7仿真( IE7 emulation)叫兼容视图。
在 X-UA-Compatible 情况下,IE8的行为和其他浏览器完全不同。
下面的简单指南是针对已经有doctype在其他浏览器触发标准模式或者几乎标准模式的新的text/html文档如何选择X-UA-Compatible HTTP头或meta标签的:
IE8的模式选择流程
doctype的处理方式