doctype声明、浏览器的标准、怪异等模式

doctype 标准(严格)模式(Standards Mode)、怪异(混杂)模式(Quirks
Mode),如何触发，区分他们有何意义？

触发标准模式

1、加DOCTYPE声明,比如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE
html>
2、设置X-UA-Compatible触发。

触发怪异模式

1、无doctype声明、定义旧的HTML版本（HTML4以下,例如3.2）
2、加XML声明，可在ie6下触发
<?xml
version="1.0" encoding="utf-8"?>
<!DOCTYPE
...>
3、在XML声明和XHTML的DOCTYPE之间加入HTML注释，可在ie7下触发 <?xml version="1.0"
encoding="utf-8"?>
<!-- keep IE7 in quirks mode -->
<!DOCTYPE
...>
5、<!--->放在<!DOCTYPE前面

IE8有4种模式：IE5.5怪异模式、IE7标准模式、IE8几乎标准模式、IE8标准模式

X-UA-Compatible设置对IE8模式的影响：
1、设置X-UA-Compatible meta

IE=5、IE=6(介于5、6之间的任意数字，比如5.987654321)：触发IE5怪异模式(无论页面是否有DOCTYPE)
IE=7(7<=
值
<8)：强制IE7标准(无论页面是否有DOCTYPE)
IE=EmulateIE7：遵循DOCTYPE(有DOCTYPE-IE7标准；无DOCTYPE-IE5怪异模式)
IE=EmulateIE8：遵循DOCTYPE(DOCTYPE-IE8几乎标准模式(或IE8标准模式)；无DOCTYPE-IE5怪异模式)
@see:
http://blogs.msdn.com/b/ie/archive/2008/08/27/introducing-compatibility-view.aspx 
IE=8、IE=Edge、IE=99、IE=9.9(大于等于8的)：有doctype-使用几乎标准模式，或IE8标准；无doctype-IE8标准。
无X-UA-Compatible、IE=IE8、IE=IE7、IE=a、把X-UA-Compatible写在<link>或<script>标签后：判断"X-UA-Compatible
HTTP
Header"。

注1：把X-UA-Compatible写在<link>或<script>标签下面，X-UA-Compatible的设置无效。
注2：页面、服务器HTTP
Header都设置了X-UA-Compatible的情况，使用页面的X-UA-Compatible设置。页面无X-UA-Compatible，才使用HTTP
Header设置的值。
注3：几乎标准模式的意思和触发，下面的"Almost Standards
Mode"有说明。
注4：IE=xx的值，ie会尝试xx转换为最接近的值。比如：IE=7.789 ->
IE=7；介于5、6之间的->IE=5；大于等于8的->IE=8。
注5：IE=4、IE=3、IE=0.1、IE=-7
这些小于5的，包括类似IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd，和无X-UA-Compatible一样一样滴。可以理解为X-UA-Compatible设置了无效的值，所以跳过这里了。

IE
X-UA-Compatible的一些说明：http://expression.microsoft.com/en-us/dd835379

2、设置X-UA-Compatible HTTP Header

IE=5、IE=6: 触发IE5怪异模式(无论页面是否有DOCTYPE)
IE=7(7<= 值 <8):
强制IE7标准(无论页面是否有DOCTYPE)
IE=EmulateIE7:
遵循DOCTYPE(有DOCTYPE-IE7标准；无DOCTYPE-IE5怪异模式)
IE=EmulateIE8：遵循DOCTYPE(DOCTYPE-IE8几乎标准，或IE8标准；无DOCTYPE-IE5怪异模式)
IE=8、IE=Edge、IE=99、IE=9.9(大于等于8的)：有doctype-使用几乎标准模式(或IE8标准)；无doctype-IE8标准。
注：设置了X-UA-Compatible(meta或http
header)后，会覆盖客户端的兼容性视图设置。会强迫(优先)使用X-UA-Compatible设置的模式
无X-UA-Compatible、IE=IE8、IE=IE7、IE=a、还有上面注5里面提到的：首先判断"兼容性视图"，有"兼容性视图"的设置(doctype-IE7标准，无doctype-IE5怪异模式)；未设置"兼容性视图"，有DOCTYPE-遵循doctype，无doctype-IE5怪异模式。

IE9有7种模式: IE5.5怪异模式、IE7标准模式、IE8几乎标准模式、IE8标准模式、IE9几乎标准模式、IE9标准模式、XML模式

IE9和IE8大体上差不多：
X-UA-Compatible
IE=(0<= 值 <7) -
触发怪异模式(无论页面是否有DOCTYPE)，注：这里的怪异模式和IE8下的有点不同，测试发现"-"、"_"这两个css
hack符号，IE8怪异下是都识别的，IE9怪异下不识别"-"。
IE=7(7<= 值 <8) -
强制IE7标准(无论页面是否有DOCTYPE)
IE=8(8<= 值 <9) -
强制IE8标准，有doctype-使用IE8几乎标准模式(或IE8标准)，无doctype-IE8标准
IE=EmulateIE7、EmulateIE8
和上面IE8的情况一样
IE=9、IE=Edge(值 >=9 ) -
有doctype-使用几乎标准模式(或IE9标准)。和IE8一样，靠doctype来选择IE9几乎标准，或IE9标准模式；无doctype-IE9标准。
IE=(值
<0)、IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd、IE=xxx类似这样不靠谱的、或把X-UA-Compatible
meta写在<link>或<script>标签后的，这些情况和无X-UA-Compatible是一样的：首先判断"兼容性视图"，有"兼容性视图"的设置(doctype-IE7标准，无doctype-怪异模式)；未设置"兼容性视图"，有DOCTYPE-遵循doctype，无doctype-怪异模式。

X-UA-Compatible的特殊写法

msdn上面提到了X-UA-Compatible值设置成"IE=9; IE=8;
IE=5"这样的，意思就是优先最前面的IE9，没IE9就用IE8，没IE8就IE5，并且并不推荐在生产环境下使用。
触发Google Chrome
Frame：<meta http-equiv="X-UA-Compatible"
content="chrome=1">
可以和IE的X-UA-Compatible混搭：比如：<meta
http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">。这样写的好处：可以让ie在最好的渲染方式下渲染页面。
"IE=edge,chrome=1"，可以写成"chrome=1,IE=edge"、"chrome=1;
IE=edge"。

几乎标准模式（Almost Standards Mode）

Firefox
1+、Safari、Chrome、Opera(从7.5开始)和IE8/IE9增加了一个"几乎标准模式"，它实现传统的表格单元格的垂直尺寸(没有严格的遵照CSS2规范)。
意思就是，比如下面的代码：
<table
style="border:1px solid blue;"
cellspacing="0">
<tr><td><img style="border:1px solid red"
width="364" height="126"
src="http://www.google.com/images/logos/ps_logo2.png"/></td></tr>
</table>
比如在IE7标准模式下，图片底部和table是没空白的；"几乎标准模式"下，图片底部和table也是没空白的；而较新的浏览器在标准模式下图片底部和table会有个空白。
@see：https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

下面的DOCTYPE都可触发IE8标准模式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE
html>
触发IE8几乎标准模式：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Mac
IE5、IE6/7、Opera(<7.5)和Konqueror无几乎标准模式(它们没有严格遵循CSS2规范，实际上，它们的标准模式更接近几乎标准模式)。HTML5把这种模式叫“受限怪异模式(limited
quirks mode)”。

IE、op、ff下几乎标准模式的相关文章：
http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx
http://www.opera.com/docs/specs/doctype/
https://developer.mozilla.org/en/Mozilla‘s_DOCTYPE_sniffing

XML模式 - application/xhtml+xml Content

Firefox、Safari、Chrome和Opera中，HTTP头设置了MIME-type(Content-Type为application/xhtml+xml时)，会触发XML模式。在XML模式中，浏览器会严格地以XML解析XHTML文档(很严格，用过W3C的xhtml验证的同学应该明白,比如"&"要用"&"+"amp;"、<br>要用
<br
/>)。
任何一个XHTML文档的解析错误会导致停止解析,FF/SF/CH/OP会直接报XML解析错误，IE9可以在开发人员工具的console里面看到报错。
MacIE5、IE6/7/8不支持application/xhtml+xml。
发现IE9下使用此模式，doctype是无所谓的，<html
xmlns="http://www.w3.org/1999/xhtml">
这句命名空间必须的，没设置命名空间css会以文本解析而失效。
同时XML模式下，X-UA-Compatible的设置将会无效。
@see:
http://www.w3.org/TR/html5/namespaces.html

参考：


http://hsivonen.iki.fi/doctype/#handling
秦歌的译文：http://dancewithnet.com/2009/06/14/activating-browser-modes-with-doctype/

总结：


X-UA-Compatible只有IE>=8才识别，所以他们可以用doctype声明、X-UA-Compatible、兼容性视图设置来改变模式。
IE6/7却依靠DOCTYPE来改变标准或怪异模式，类似这些低版本的浏览器下的标准模式，接近与“先进”浏览器下的几乎标准模式，因为它们都没有严格遵循CSS2规范。并且他们同样在标准模式下，各自的渲染还是是有差别的。没差别就不会有css
hack的诞生。
IE6-IE9下，怪异模式都在IE5.5下。
不需要写X-UA-Compatible，用css也完全可以搞定各个版本IE的解析不同。

模式、版本不同，不仅仅css解析不同，js的解析也有不同。
了解浏览器解析模式的不同，可以避免我们辛苦写出的标准代码被怪异所残害。
让开发者更注重遵循标准，无论在生产效率还是在协作、沟通上都有好处滴。
现在几乎人人都用标准的doctype来声明文档，所以纠结标准、怪异模式对工作的影响不太大。

Henri Sivonen文章里有2处我测试有误：
1、IE=8 或 IE=Edge 或 IE=99 或
IE=9.9：进入“几乎标准模式”
2、IE=IE8 或 IE=IE7 或 IE=a 或 IE=EmulateIE8 或没有或首先出现
script：进入”X-UA-Compatible HTTP头” 
不同之处，我上面已经说的比较详细了。

以上说的东西全部经过本人亲测，win7 sp1 en
下的ie8，测试完毕装的IE9，都是原版。
想自己测试结果的同学可以，使用我之前写的用css检测浏览器的文章：http://www.fantxi.com/blog/archives/browser_detector/
来做测试，先装win8在装IE9，然后http头部分用程序或配置服务器来设置。代码修修改改，测了我一晚上。。
推荐看看秦歌的译文，涉及了更多的知识，写的更全面。我这里只针对IE8/IE9的渲染模式做了个测试。

doctype声明、浏览器的标准、怪异等模式,布布扣,bubuko.com

时间： 2024-08-25 04:16:41

doctype声明、浏览器的标准、怪异等模式的相关文章

DOCTYPE声明

1.<!DOCTYPE html> 告诉浏览器以何种规范解析文档(此处为html(5));——html5规范 2.浏览器解析文档的模式:标准模式.混杂模式; 如果不加<!DOCTYPE html>浏览器就会按混杂模式解析文档,由于各浏览器混杂模式不同所以就会造成兼容问题:但是标准模式也有浏览器不同,IE特例不同: 3.IE6,7有 准标准模式 和 混杂模式,他们的混杂模式是为了兼容IE5的:且它们的准标准模式也不是我们现在的标准模式,而IE8有3个模式,标准模式,准标准模式,混杂模

浏览器的标准模式与怪异模式的设置与区分方法

由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility Mode):由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode),这就是二者最简单的区别.W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页还能继续浏览,在标准出

浏览器的标准模式和怪异模式

要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode). 标准模式: 浏览器按W3C标准解析执行代码: 怪异模式: 使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式. 浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关. DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示: 忽略DTD声明,将使网页进入怪异模式

关于HTML(二)---------浏览器的标准模式和怪异模式

标准模式和怪异模式的来由 在HTML与CSS的标准化未完成之前,各个浏览器对于HTML和CSS的解析有各自不同的实现,而有很多旧的网页都是按照这些非标准的实现去设计的.在HTML与CSS标准确定之后,浏览器一方面要按照标准去实现对HTML与CSS的支持,另一方面又要保证对非标准的旧网页设计的后向兼容性.因此,现代的浏览器一般都有两种渲染模式:标准模式和怪异模式.在标准模式下,浏览器按照HTML与CSS标准对文档进行解析和渲染:而在怪异模式下,浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染

浏览器的标准模式和怪异模式的区别

所谓的标准模式是指,浏览器按W3C标准解析执行代码:怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式.浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略DTD声明,将使网页进入怪异模式(quirks mode).

文档类型DTD，DOCTYPE和浏览器模式

出处:http://blog.csdn.net/freshlover/article/details/11616563 浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页,如果文档正确定义了DOCTYPE浏览器则会进入标准模式(Standards Mode),否则浏览器会进入怪异模式或混杂模式(Quirks mode). 浏览器开发初期W3C倡导的网页标准并不流行,因此浏览器有独特的对网页标签或属性的解析模式,随着日后网页标准的流行,浏览器增加了对新标准的支持(Standards M

DOCTYPE声明的作用是什么？严格模式与混杂模式如何区分？

HTML语言已经存在太久了,目前必然会有一些不同版本的文档存在,为了能够让浏览器清楚你的文档的版本类型和风格,需要在文档的起始用DOCTYPE声明制定当前文档的版本和风格.如果在网页中提供了版本信息,则可以有利于验证页面中的代码是否符合当前的版本和风格 在严格模式即标准模式中,浏览器根据贵干呈现页面:在混杂模式中,页面以向后兼容的方式显示,以防老站店无法工作 如果HTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现,对于HTML4.01文档包含严格DTD的DOCTYPE常常导致页面

关于Doctype与浏览器呈现模式

一 HTML版本--浏览器向后兼容性(What & Why) 在介绍什么是Doctype之前,我们先了解一下 HTML版本. 从HTML的产生到HTML5的提出,经历了几十年的发展和完善.这就导致了许多的web页面,使用HTML的老版本写的.每个版本的标签.语法都不完全相同,很多标签都已经被替换或者废弃了. 结论1: 所以浏览器就得:既能支持由老版本HTML写的网页,也要支持最新标准的网页(即向后兼容性) 二 文档类型(DOCTYPE) 1 什么是DTD (What): 不同的HTML版本(标准

DOCTYPE 与浏览器渲染模式分析

DOCTYPE 的诞生 DOCTYPE,或者称为 Document Type Declaration(文档类型声明,缩写 DTD).通常情况下,DOCTYPE 位于一个 HTML 文档的最前面的位置,位于根元素 HTML 的起始标签之前.因为浏览器必须在解析 HTML 文档正文之前就确定当前文档的类型,以决定其需要采用的渲染模式,不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析.尤其是在 IE 系列浏览器中,由 DOCTYPE 所决定的 HTML 页面的渲染模