HTML文档类型DTD与浏览器怪异模式的示例分析

这篇文章主要为大家展示了“HTML文档类型DTD与浏览器怪异模式的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“HTML文档类型DTD与浏览器怪异模式的示例分析”这篇文章吧。

创新互联服务项目包括肥西网站建设、肥西网站制作、肥西网页制作以及肥西网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，肥西网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到肥西省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

浏览器从服务端获取网页后会根据文档的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标准定义。

    在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 开始的网页将会触发标准模式：

"http://www.w3.org/TR/html4/strict.dtd">

如下 DOCTYPE 语法上是无效的，因为它包含公共标识符关键字 PUBLIC 却没有公共标识符（指示所用 HTML 版本的名称），也没有 HTML 文档类型定义的系统标识符 URL。这将会触发怪异模式：

此外，一个不含任何DOCTYPE 的网页将会以 quirks 模式渲染。

对此一个值得一提的例外是微软的 Internet Explorer 6 浏览器，如果 DOCTYPE 之前有一个 XML 声明，不管是否指定完整的DOCTYPE，它就会以 quirks 模式渲染一个页面。因此以如下代码开始的 XHTML 页面会被 IE 6 渲染为 quirks 模式：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在一定程度上，上述代码是有用的，然而它仅仅会对 IE 6 触发怪异模式。

如果 DOCTYPE 之前有任何语句，quirks 模式在任何版本的 IE 中（截至 IE 9）同样会被触发。例如，如果一个超文本文件在 DOCTYPE 前包含一个注释或者任何标签，IE (截至 9) 会使用 quirks 模式：

"http://www.w3.org/TR/html4/strict.dtd">

XML 声明的问题在Internet Explorer 7 中被解决了，在此 XML 声明只是简单的被忽略。然而，为对现存和更早的网页浏览器的最大程度的兼容，万维网联盟，维持 XML 规范的组织，建议 XHTML文件的作者可以考虑省略XML 声明。

JavaScript中的区别

Quirks mode的Table of measurements 

点击打开链接

MSDN

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。

模式验证

在绝大多数浏览器，文档对象模型的扩展 document.compatMode 指示当前页面的渲染模式。在标准模式和接近标准模式，document.compatMode 包含值 CSS1Compat，然而在怪异模式该值为 BackCompat。

此外，在 MozillaFirefox 和 Opera 一个给定页面的渲染模式也被指示在“页面信息”的信息框中。而在Internet Explorer 8 及更高版本的 IE 中，文档模式被显示于Internet Explorer开发人员工具中，且可以被用户更改。在 Internet Explorer 中还有 document.documentMode 的私有 JavaScript 扩展，其取值为 5, 7, 8, 9, 10 之一的浮点型变量。

以上是“HTML文档类型DTD与浏览器怪异模式的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！