HTML文档类型DTD与浏览器怪异模式
虽然在兼容IE6时候经常会注意到两个模式的区别，但是系统的理解起来，还没有认真总结过。看了一些网上的资料。结合自己的理解汇总了一下，放在这里备忘并分享给大家。
浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页，如果文档正确定义了DOCTYPE浏览器则会进入标准模式（Standards Mode），否则浏览器会进入怪异模式或混杂模式（Quirks mode）。
浏览器开发初期W3C倡导的网页标准并不流行，因此浏览器有独特的对网页标签或属性的解析模式，随着日后网页标准的流行，浏览器增加了对新标准的支持（Standards Mode），但又没有放弃对原有模式的兼容（Quirks mode），这就是浏览器多种表现模式的来源。
当微软开始开发与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们IE6.0以后的版本在浏览器内嵌了两种表现模式： Standards Mode（标准模式或Strict Mode）和Quirks mode（怪异模式或兼容模式Compatibility Mode）。在标准模式中，浏览器根据W3C所定的规范来显示页面；而在怪异模式中，页面将以IE5，甚至IE4的显示页面的方式来表现，以保持以前的网页能正常显示。
对于这两种模式引起最大的问题就是盒模式的问题，或者现在大家已经忽视了IE5的存在，但是，IE在怪异模式运行的盒模式依然在最新版本的IE保留着，甚至在IE6—IE10都保留有多种模式供开发者使用。其实为了与可能数量众多的网页维持兼容，现代的网页浏览器一般都具有多种渲染模式：在“标准模式”(standards mode) 页面按照 HTML 与 CSS 的定义渲染，而在“quirks 模式”中则尝试模拟更旧的浏览器的行为。一些浏览器（例如，那些基于Mozilla 的 Gecko 渲染引擎的，或者 Internet Explorer 8 在 strict mode 下）也使用一种尝试于这两者之间妥协的“近乎标准”(almoststandards) 模式，实施了一种表单元格尺寸的怪异行为，除此之外符合W3C标准定义。
（InternetExplorer box model bug）是指早期版本的IE调整网页元素大小的方法，和W3C为层叠样式表（CSS）语言推荐的标准方式不同。在IE6中，浏览器支持一种解决了这种差异的可选的渲染模式（叫做“遵从标准模式”）。然而，出于向后兼容的原因，所有版本的IE (截至 IE 9 及 IE 10 Developer Preview) 仍然默认表现为通常的，非标准的模式。Internet Explorerfor Mac不受这种非标准行为影响。此外，Internet Explorer 10 于其 Consumer Preview 之中也改变其默认怪异模式为一种更加符合规范的类似于非 IE 浏览器的怪异模式。
模式之间的差异和示例
Quirks和Standards的区别大部分都可以归为IE5和IE6的区别。
在 Quirks 模式和标准模式之间一个突出的不同是对 CSS IE盒模型缺陷的处理。在第 6 版之前，InternetExplorer 曾经使用一种决定一个元素的盒模型的宽度和高度的，与 CSS 规范所指定相冲突的算法，而且由于 Internet Explorer 的流行，很多依赖于这种不正确的算法的网页被创建。而在版本 6, Internet Explorer 在标准模式下渲染时使用了CSS规范的算法，而在quirks模式下使用先前不规范的算法。
另一个值得一提的不同点是某些行内 (inline) 元素的垂直对齐；很多早期的浏览器对齐图片至包含它们的盒子的下边框，虽然 CSS 的规范要求它们被对齐至盒内文本的基线。标准模式下，基于 Gecko 的浏览器将会对齐至基线，而在 quirks 模式下它们会对齐至底部。
此外，很多早期的浏览器对表格内部的字体样式不实施继承；结果是，字体样式必须为整个文档作为一个整体指定一次，并且为表格再次指定一次，尽管 CSS 规范要求字体样式被继承进表格。如果字号使用相对单位指定，一个标准兼容的浏览器会继承基准字号，然后应用于表格内的相对字号：比如，一个声明了基准字号为 80% 的页面内声明表格为 80% （以保证在不正确继承字号的浏览器中有 80% 的字号）的字号将会，在一个标准兼容的浏览器里，显示具有 64% 字号的表格。结果是，浏览器在怪异模式典型的不对表格继承字号。.
IE6 IE7 在怪异模式下盒模型是一模一样的 即width=width
IE6 IE7 在标准模式下 盒模型也是一模一样的即width=width+padding+border
代码实例http://bbs.blueidea.com/thread-2839403-1-1.html
在strict mode中 ：
width是内容宽度，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width +padding-right + border-right-width + margin-right;
在quirks mode中 ：
width则是元素的实际宽度，内容宽度 = width - (margin-left +margin-right + padding-left + padding-right + border-left-width +border-right-width)
怪异模式CSS上区别《Quirks mode and strict mode》
javascript上的区别
以下是一些重要的不同点：
1）盒模型的高宽包含内边距padding和边框border
在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border。
2）可以设置行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
3）可设置百分比的高度
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
4）用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:
body{text-align:center};#content{text-align:left}
5）quirk模式下设置图片的padding会失效
6）quirk模式下Table中的字体属性不能继承上层的设置
7）quirk模式下white-space:pre会失效
接近标准模式
根据 CSS2 的规范维持了“传统的”表单元格的垂直方向大小调整的叫做“接近标准模式”(almoststandards mode) 或者“严格模式”(strictmode) 的第三种兼容性模式，已被在这些浏览器中实施：Safari, Opera 7.5 (和以上), 所有基于 Gecko (自 1.0.1) 的浏览器（比如 Firefox）和 Internet Explorer 8。
“接近标准”模式的渲染和“标准”模式除了一点之外，在所有细节上相匹配。表单元格内部图片的布局采用和“quirks”模式相同的方式被处理，而不是按照标准，这点和例如 Internet Explorer 7 （以及更早）的旧版 (en) 浏览器相当一致。这意味着使用表格内图像片的布局在“quirks”或“接近标准”模式下的浏览器中，比起“标准”模式下，更不至于分崩离析。
触发不同渲染模式
DOCTYPE，简称为DTD，是英文DocumentType Definition的缩写，中文“文档类型”
DOCTYPE标签是单独出现的
说明：
文档类型，会使浏览器使用相应标准加载网页并显示
文档类型定义在HTML文档的第一行，在html标签之前
文档不定义DOCTYPE，浏览器将无法获知HTML或XHTML文档的类型，因此会进入混乱模式。
通常，浏览器基于页面中文件类型描述DTD的存在以决定采用哪种渲染模式；如果存在一个完整的 DOCTYPE 则浏览器将会采用标准模式，而如果它缺失则浏览器将会采用怪异模式。例如，一个以如下 DOCTYPE 开始的网页将会触发标准模式：
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 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//DTDXHTML 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//DTDHTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XML 声明的问题在Internet Explorer 7 中被解决了，在此 XML 声明只是简单的被忽略。然而，为对现存和更早的网页浏览器的最大程度的兼容，万维网联盟，维持 XML 规范的组织，建议 XHTML文件的作者可以考虑省略XML 声明。
JavaScript中的区别
Quirks mode的Table of measurements
DOM中的document有一个属性叫compatMode，其返回值是BackCompat和CSS1Compat，分别对应quirks mode和strict mode。
function detectMode(){
varmode=document.compatMode;
if(mode="BackCompat")
alert("当前以quirks mode的方式渲染页面");
elseif(mode="CSS1Compat")
alert("当前已strict mode的方式渲染页面");
elsealert("浏览器版本不支持compatMode");
}
IE8以前的版本compatMode只取决于DocType，IE8+不建议使用compatMode判断，而建议使用documentMode，http://msdn.microsoft.com/en-US/library/cc196988.aspx
常用的浏览器表现模式
IE
IE包括两种模式：标准模式（Standards Mode）与怪异模式或混杂模式（Quirks mode）。
简称为IE(S)与IE(Q)
FireFox
FIreFox包括三种模式：Full Standards Mode、Almost Standards Mode与Quirks Mode。对这三种模式的描述见：Mozilla's DOCTYPE sniffing
Opera
Opera包括三种模式：Quirks、Standards与Almost Standards。对这三种模式的描述见：DOCTYPE Switches supportin Opera
当没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用Quirks Mode呈现。
文档类型的比较
Henri Sivonen 编译了一个不同文档类型以及在最常见的浏览器中它们被如何对待的清单，展示了这些情况下，页面是否被渲染为怪异 (Q)，标准 (S) 或接近标准 (A) 模式。接近标准模式的判定标准是非标准的表单元格高度的渲染。这个表格应用于Content-Type 为 text/html 的内容。Content-Type 为 application/xhtml+xml 的内容在 Chrome, Firefox, InternetExplorer 9 (以及 10), Safari和 Opera 被渲染为标准模式。Internet Explorer 6, 7 和 8 不支持 application/xhtml+xml 的 Content-Type。
|
Doctype |
Mozilla 0.9.5-1.0 |
IE 8+ |
IE 7 |
IE 6 |
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 |
有系统标识符 |
{{{text}}} S |
{{{text}}} S |
{{{text}}} S |
A |
A |
A |
A |
||
|
无系统标识符 |
{{{text}}} S |
{{{text}}} S |
{{{text}}} S |
A |
A |
Q |
A |
|||
|
Transitional |
有系统标识符 |
{{{text}}} S |
{{{text}}} S |
A |
A |
A |
A |
Q |
||
|
无系统标识符 |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
|||
|
<!DOCTYPE html> |
Q |
{{{text}}} S |
{{{text}}} S |
A |
A |
A |
? |
|||
|
XHTML Basic |
||||||||||
|
有系统标识符且无 XML 声明 |
{{{text}}} S |
{{{text}}} S |
{{{text}}} S |
A |
A |
A |
A |
|||
|
XHTML 1.0 |
||||||||||
|
Strict |
有系统标识符和 XML 声明 |
{{{text}}} S |
{{{text}}} S |
{{{text}}} S |
A |
Q |
A |
Q |
||
|
有系统标识符且无 XML 声明 |
{{{text}}} S |
{{{text}}} S |
{{{text}}} S |
A |
A |
A |
A |
|||
|
无系统标识符，也无 XML 声明 |
{{{text}}} S |
{{{text}}} S |
{{{text}}} S |
A |
A |
A |
? |
|||
|
Transitional |
有系统标识符且有 XML 声明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
{{{text}}} S |
{{{text}}} S |
A |
A |
Q |
A |
Q |
||
|
有系统标识符，无 XML 声明 |
{{{text}}} S |
{{{text}}} S |
A |
A |
A |
A |
Q |
|||
|
无系统标识符，无 XML 声明 |
{{{text}}} S |
{{{text}}} S |
A |
A |
A |
A |
? |
|||
|
XHTML 1.1 |
||||||||||
|
有系统标识符和 XML 声明 |
{{{text}}} S |
{{{text}}} S |
{{{text}}} S |
A |
Q |
A |
Q |
|||
|
有系统标识符，无 XML 声明 |
{{{text}}} S |
{{{text}}} S |
{{{text}}} S |
A |
A |
A |
A |
|||
|
Doctype |
Mozilla 0.9.5-1.0 |
IE 8+ |
IE 7 |
IE 6 |
Konq 3.2 |
|||||
模式验证
在绝大多数浏览器，文档对象模型的扩展 document.compatMode 指示当前页面的渲染模式。在标准模式和接近标准模式，document.compatMode 包含值 CSS1Compat，然而在怪异模式该值为 BackCompat。
此外，在 MozillaFirefox 和 Opera 一个给定页面的渲染模式也被指示在“页面信息”的信息框中。而在Internet Explorer 8 及更高版本的 IE 中，文档模式被显示于Internet Explorer开发人员工具中，且可以被用户更改。在 Internet Explorer 中还有 document.documentMode 的私有 JavaScript 扩展，其取值为 5, 7, 8, 9, 10 之一的浮点型变量。
参考文章及扩展：
DOCTYPE Switches support in Opera Presto2.10
HTML文档类型DTD与浏览器怪异模式的更多相关文章
- 文档类型DTD，DOCTYPE和浏览器模式
出处:http://blog.csdn.net/freshlover/article/details/11616563 浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页,如果文档正确定义 ...
- Html-文档类型(DTD)和DOCTYPE
在正式介绍文档类型(DTD)和DOCTYPE之前,我们需要先了解HTML和XHTML的之间的区别,现在Html5已经慢慢的成为主流,之前的数十年一直都是Html4.01的天下,Html4.01于199 ...
- 文档类型、DOCTYPE切换和浏览器模式
DTD(文档类型定义)是一种机器可读的规则,它们定义XML或HTML的特定版本中允许有什么.不允许有什么.在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施.浏览器通过分析页面的DO ...
- 有效的XML: DTD（文档类型定义）介绍(转)
文档类型定义和命名空间 有效(Valid)的XML文档: 首先,XML文档是个格式正规的(Well-formed)XML文档:(见格式正规的XML:语法 属性 实体 处理指令 样式单 CDATA节). ...
- XML之DTD（文档类型定义）
文档类型定义(DTD)可定义合法的XML文档构建模块.它使用一系列合法的元素来定义文档的结构. DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用. 声明元素 在 DTD 中,XML 元素 ...
- 2018.5.14 XML文档类型定义----DTD
1.DTD概述 一个完全意义上的XML文件不仅仅是Well-fromed(格式良好的),而且还应该是使用了一些自定义的标记ValidatingXMl(有效的)文档也就是说他必须遵守文档类型的定义中已声 ...
- doctype（文档类型）的作用是什么?转载
<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范. Document Type ...
- Doctype文档类型、作用及触发方式
Doctype文档类型 1) 该标签可声明三种 DTD 类型,分别表示严格版本.过渡版本以及基于框架的 HTML 文档. 2) HTML 4.01 规定了三种文档类型:Strict.Transit ...
- DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义
DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义 今天看到一篇CSS应用的一个友好搜索,我按网页上的代码复制.粘贴后预览时总达不到效果,而直接拷贝他的实例却能达到效果, ...
随机推荐
- 用merge into进行性能优化
有时候开发组有这么一个需求,一个表和它的备份表,把备份表中的某些字段替换到原表中,当数据量非常大的时候就很很慢,这个时候如果我们用merge into往往会提高几倍的性能,下面我们来做个实验: SQL ...
- Eclipse 编码区-保护色-快捷大全
Eclipse快捷键大全 Eclipse编码区-保护色-快捷设置 1.设置路径: windows-preferences-general-editors-text Editors-ba ...
- BZOJ 1633: [Usaco2007 Feb]The Cow Lexicon 牛的词典
题目 1633: [Usaco2007 Feb]The Cow Lexicon 牛的词典 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 401 Solv ...
- 数据结构大型实验的记录(done)
用平衡二叉树的知识实现用户登录系统模拟 基本思路: 类:AVLnode (树的节点类) AVLtree (树的基本操作类 包括insert remove search 平衡树的4种旋转) UserIn ...
- c++，public/protected/private权限修饰符
1.public的变量可以在类中以及外部访问到: 2. private只可以在类/友元中访问到. #include <iostream> using namespace std; //-- ...
- 什么时候需要交换Top Level ?
什么时候需要交换Top Level ? 上一篇中提到,如果采用仿真的时候,运用门级仿真就需要进行顶层交换,RTL仿真不需要,那么什么时候需要呢? QuartusII 向下包含,在Project Nav ...
- QTableWidget的用法总结
在使用Qt不多的日子里,已经两次用到了QTableWidget这个控件,也慢慢的习惯和喜欢上了它.再使用QTableWidget的时候,已不像刚开始使用时的迷茫.嗯嗯.现在就来总结总结我与QTable ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- 修复ubuntu播放wmv等视频没有声音问题
1. Mplayer or SMplayer 1.1 原因: 很可能是你没有安装 w32codes 1.2 解决方法: (1)下载 w32codes 官方站点 all-20110131.tar.bz2 ...
- UVa 121 - Pipe Fitters
称号:放置在一个圆中的矩形,它要求每个圆的每行或列是切线,问:多少能竖起来. 分析:计算几何.数论.首先计算矩形显示屏,然后计算互显示器(每一行与相邻行相同差1个月)求最大,你可以. 说明:╮(╯▽╰ ...