【移动应用开发技术】HTML文档类型DTD与浏览器怪异模式的示例分析

【移动应用开发技术】HTML文档类型DTD与浏览器怪异模式的示例分析

这篇文章主要为大家展示了“HTML文档类型DTD与浏览器怪异模式的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让在下带领大家一起研究并学习一下“HTML文档类型DTD与浏览器怪异模式的示例分析”这篇文章吧。浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页，如果文档正确定义了DOCTYPE浏览器则会进入标准模式（StandardsMode），否则浏览器会进入怪异模式或混杂模式（Quirksmode）。浏览器开发初期W3C倡导的网页标准并不流行，因此浏览器有独特的对网页标签或属性的解析模式，随着日后网页标准的流行，浏览器增加了对新标准的支持（StandardsMode），但又没有放弃对原有模式的兼容（Quirksmode），这就是浏览器多种表现模式的来源。当微软开始开发与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们IE6.0以后的版本在浏览器内嵌了两种表现模式：StandardsMode（标准模式或StrictMode）和Quirksmode（怪异模式或兼容模式CompatibilityMode）。在标准模式中，浏览器根据W3C所定的规范来显示页面；而在怪异模式中，页面将以IE5，甚至IE4的显示页面的方式来表现，以保持以前的网页能正常显示。对于这两种模式引起最大的问题就是盒模式的问题，或者现在大家已经忽视了IE5的存在，但是，IE在怪异模式运行的盒模式依然在最新版本的IE保留着，甚至在IE6—IE10都保留有多种模式供开发者使用。其实为了与可能数量众多的网页维持兼容，现代的网页浏览器一般都具有多种渲染模式：在“标准模式”(standardsmode)页面按照HTML与CSS的定义渲染，而在“quirks模式”中则尝试模拟更旧的浏览器的行为。一些浏览器（例如，那些基于Mozilla的Gecko渲染引擎的，或者InternetExplorer8在strictmode下）也使用一种尝试于这两者之间妥协的“近乎标准”(almoststandards)模式，实施了一种表单元格尺寸的怪异行为，除此之外符合W3C标准定义。

/20130912195118406?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZnJlc2hsb3Zlcg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEastIE盒模型缺陷（InternetExplorerboxmodelbug）是指早期版本的IE调整网页元素大小的方法，和W3C为层叠样式表（CSS）语言推荐的标准方式不同。在IE6中，浏览器支持一种解决了这种差异的可选的渲染模式（叫做“遵从标准模式”）。然而，出于向后兼容的原因，所有版本的IE(截至IE9及IE10DeveloperPreview)仍然默认表现为通常的，非标准的模式。InternetExplorerforMac不受这种非标准行为影响。此外，InternetExplorer10于其ConsumerPreview之中也改变其默认怪异模式为一种更加符合规范的类似于非IE浏览器的怪异模式。模式之间的差异和示例

Quirks和Standards的区别大部分都可以归为IE5和IE6的区别。在Quirks模式和标准模式之间一个突出的不同是对CSSIE盒模型缺陷的处理。在第6版之前，InternetExplorer曾经使用一种决定一个元素的盒模型的宽度和高度的，与CSS规范所指定相冲突的算法，而且由于InternetExplorer的流行，很多依赖于这种不正确的算法的网页被创建。而在版本6,InternetExplorer在标准模式下渲染时使用了CSS规范的算法，而在quirks模式下使用先前不规范的算法。另一个值得一提的不同点是某些行内(inline)元素的垂直对齐；很多早期的浏览器对齐图片至包含它们的盒子的下边框，虽然CSS的规范要求它们被对齐至盒内文本的基线。标准模式下，基于Gecko的浏览器将会对齐至基线，而在quirks模式下它们会对齐至底部。此外，很多早期的浏览器对表格内部的字体样式不实施继承；结果是，字体样式必须为整个文档作为一个整体指定一次，并且为表格再次指定一次，尽管CSS规范要求字体样式被继承进表格。如果字号使用相对单位指定，一个标准兼容的浏览器会继承基准字号，然后应用于表格内的相对字号：比如，一个声明了基准字号为80%的页面内声明表格为80%（以保证在不正确继承字号的浏览器中有80%的字号）的字号将会，在一个标准兼容的浏览器里，显示具有64%字号的表格。结果是，浏览器在怪异模式典型的不对表格继承字号。.IE6IE7在怪异模式下盒模型是一模一样的

即width=widthIE6IE7在标准模式下盒模型也是一模一样的即width=width+padding+border代码实例/thread-2839403-1-1.html在strictmode中：width是内容宽度，也就是说,元素真正的宽度=margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right;在quirksmode中：width则是元素的实际宽度，内容宽度=width-(margin-left+margin-right+padding-left+padding-right+border-left-width+border-right-width)怪异模式CSS上区别《Quirksmodeandstrictmode》javascript上的区别以下是一些重要的不同点：1）盒模型的高宽包含内边距padding和边框border/20130912194842984?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZnJlc2hsb3Zlcg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border。2）可以设置行内元素的高宽

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。3）可设置百分比的高度

在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。4）用margin:0auto设置水平居中在IE下会失效

使用margin:0auto在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的规范维持了“传统的”表单元格的垂直方向大小调整的叫做“接近标准模式”(almoststandardsmode)或者“严格模式”(strictmode)的第三种兼容性模式，已被在这些浏览器中实施：Safari,Opera7.5(和以上),所有基于Gecko(自1.0.1)的浏览器（比如Firefox）和InternetExplorer8。“接近标准”模式的渲染和“标准”模式除了一点之外，在所有细节上相匹配。表单元格内部图片的布局采用和“quirks”模式相同的方式被处理，而不是按照标准，这点和例如InternetExplorer7（以及更早）的旧版(en)浏览器相当一致。这意味着使用表格内图像片的布局在“quirks”或“接近标准”模式下的浏览器中，比起“标准”模式下，更不至于分崩离析。触发不同渲染模式DOCTYPE，简称为DTD，是英文DocumentTypeDefinition的缩写，中文“文档类型”DOCTYPE标签是单独出现的说明：

文档类型，会使浏览器使用相应标准加载网页并显示

文档类型定义在HTML文档的第一行，在html标签之前文档不定义DOCTYPE，浏览器将无法获知HTML或XHTML文档的类型，因此会进入混乱模式。通常，浏览器基于页面中文件类型描述DTD的存在以决定采用哪种渲染模式；如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，而如果它缺失则浏览器将会采用怪异模式。例如，一个以如下DOCTYPE开始的网页将会触发标准模式：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01//EN""/TR/html4/strict.dtd">如下DOCTYPE语法上是无效的，因为它包含公共标识符关键字PUBLIC却没有公共标识符（指示所用HTML版本的名称），也没有HTML文档类型定义的系统标识符URL。这将会触发怪异模式：<!DOCTYPEhtmlPUBLIC>此外，一个不含任何DOCTYPE的网页将会以quirks模式渲染。对此一个值得一提的例外是微软的InternetExplorer6浏览器，如果DOCTYPE之前有一个XML声明，不管是否指定完整的DOCTYPE，它就会以quirks模式渲染一个页面。因此以如下代码开始的XHTML页面会被IE6渲染为quirks模式：<?xmlversion="1.0"encoding="utf-8"?><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd">在一定程度上，上述代码是有用的，然而它仅仅会对IE6触发怪异模式。如果DOCTYPE之前有任何语句，quirks模式在任何版本的IE中（截至IE9）同样会被触发。例如，如果一个超文本文件在DOCTYPE前包含一个注释或者任何标签，IE(截至9)会使用quirks模式：<!--ThiscommentwillputIE6,7,8,and9inquirksmode--><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""/TR/html4/strict.dtd">XML声明的问题在InternetExplorer7中被解决了，在此XML声明只是简单的被忽略。然而，为对现存和更早的网页浏览器的最大程度的兼容，万维网联盟，维持XML规范的组织，建议XHTML文件的作者可以考虑省略XML声明。JavaScript中的区别Quirksmode的Tableofmeasurements

点击打开链接MSDNDOM中的document有一个属性叫compatMode，其返回值是BackCompat和CSS1Compat，分别对应quirksmode和strictmode。functiondetectMode(){varmode=patMode;if(mode="BackCompat")alert("当前以quirksmode的方式渲染页面");elseif(mode="CSS1Compat")alert("当前已strictmode的方式渲染页面");elsealert("浏览器版本不支持compatMode");}IE8以前的版本compatMode只取决于DocType，IE8+不建议使用compatMode判断，而建议使用documentMode，/en-US/library/cc196988.aspx常用的浏览器表现模式IEIE包括两种模式：标准模式（StandardsMode）与怪异模式或混杂模式（Quirksmode）。简称为IE(S)与IE(Q)FireFoxFIreFox包括三种模式：FullStandardsMode、AlmostStandardsMode与QuirksMode。对这三种模式的描述见：Mozilla'sDOCTYPEsniffingOperaOpera包括三种模式：Quirks、Standards与AlmostStandards。对这三种模式的描述见：DOCTYPESwitchessupportinOpera当没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用QuirksMode呈现。文档类型的比较HenriSivonen编译了一个不同文档类型以及在最常见的浏览器中它们被如何对待的清单，展示了这些情况下，页面是否被渲染为怪异(Q)，标准(S)或接近标准(A)模式。接近标准模式的判定标准是非标准的表单元格高度的渲染。这个表格应用于Content-Type为text/html的内容。Content-Type为application/xhtml+xml的内容在Chrome,Firefox,InternetExplorer9(以及10),Safari和Opera被渲染为标准模式。InternetExplorer6,7和8不支持application/xhtml+xml的Content-Type。DoctypeNS6Mozilla0.9.5-1.0IE8+FirefoxChromeSafariOpera7.5+Netscape7+Mozilla1.0.1+Konq3.5+HTML5specIE7Opera7.10IE6Opera7.0MacIE5Konq3.2***QQQQQQQHTML

3.2<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML3.2Final//EN">QQQQQQQHTML

4.01Strict有系统标识符<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""/TR/html4/strict.dtd">{`text`}S{`text`}S{`text`}SAAAA无系统标识符<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN">{`text`}S{`text`}S{`text`}SAAQATransitional有系统标识符<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">{`text`}S{`text`}SAAAAQ无系统标识符<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">QQQQQQQHTML5<!DOCTYPEhtml>Q{`text`}S{`text`}SAAA?XHTML

Basic有系统标识符且无XML声明<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTMLBasic1.0//EN""/TR/xhtml-basic/xhtml-basic10.dtd">{`text`}S{`text`}S{`text`}SAAAAXHTML

1.0Strict有系统标识符和XML声明<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd">{`text`}S{`text`}S{`text`}SAQAQ有系统标识符且无XML声明<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd">{`text`}S{`text`}S{`text`}SAAAA无系统标识符，也无XML声明<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN">{`text`}S{`text`}S{`text`}SAAA?Transitional有系统标识符且有XML声明<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">{`text`}S{`text`}SAAQAQ有系统标识符，无XML声明<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">{`text`}S{`text`}SAAAAQ无系统标识符，无XML声明<!DOCTYPEhtmlPUB