天天看点

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"?>

...>

3、在XML声明和XHTML的DOCTYPE之间加入HTML注释,可在ie7下触发 <?xml version="1.0"

encoding="utf-8"?>

<!-- keep IE7 in quirks mode -->

5、<!--->放在<!DOCTYPE前面

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和IE8大体上差不多:

X-UA-Compatible

IE=(0<= 值 <7) -

触发怪异模式(无论页面是否有DOCTYPE),注:这里的怪异模式和IE8下的有点不同,测试发现"-"、"_"这两个css

hack符号,IE8怪异下是都识别的,IE9怪异下不识别"-"。

IE=7(7<= 值 <8) -

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-怪异模式。

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"。

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"

触发IE8几乎标准模式:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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)”。