瀏覽器解析模式:DOCTYPE宣告問題用法詳解

網頁製作cnn6文章簡介：IE8有4種模式：IE5.5怪異模式、IE7標準模式、IE8幾乎標準模式、IE8標準模式。

#

觸發標準模式

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下觸發
ffeb40d5bcdc5458d8776a6742da47e3
6696bd7d107ee1b4fe3f02d4fff4771a
3、在XML聲明和XHTML的DOCTYPE之間加入HTML註釋，可在ie7下觸發ffeb40d5bcdc5458d8776a6742da47e3
b23583a30551a3f64a1a55213c69c1dd
bfe2946cb5cfdffb9884d7642fb4973e
5、1ce21ff05b6519698cd23502fbc95a8b放在06cc9ed40dbe7b6574ff1e788f1737e4或3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤後：判斷"X-UA-Compatible HTTP Header"。

註1：把X-UA-Compatible寫在2cdf5bf648cf2f33323966d7f58a7f3f或3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤下面，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設定了無效的值，所以跳過這裡了。

2、設定X-UA-Compatible HTTP Header

IE=5、IE=6: 觸發IE5怪異模式(無論頁面是否有DOCTYPE)
IE=7(773e1e5988c26ae8af7172e17ead9e8ef=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寫在2cdf5bf648cf2f33323966d7f58a7f3f或3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤後的，這些情況和無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：3435c5972dd88b33da7181f5cc86ec33
可以和IE的X-UA-Compatible混搭：比如：edeeb43dc591905d5529bb5165ba0baa。这样写的好处：可以让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.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几乎标准模式：
c22098bfd3f62d7436149aaab013de1a
3c6ee2e4e556c3badc505155aae90f4f
Mac IE5、IE6/7、Opera(8f6e2fe385d7f17760ce5575dcfc3807)。
任何一个XHTML文档的解析错误会导致停止解析,FF/SF/CH/OP会直接报XML解析错误，IE9可以在开发人员工具的console里面看到报错。
MacIE5、IE6/7/8不支持application/xhtml+xml。
发现IE9下使用此模式，doctype是无所谓的，1d33348365c3ec55b420fe6254061305 这句命名空间必须的，没设置命名空间css会以文本解析而失效。
同时XML模式下，X-UA-Compatible的设置将会无效。

总结：

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来声明文档，所以纠结标准、怪异模式对工作的影响不太大。

以上是瀏覽器解析模式:DOCTYPE宣告問題用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！