DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> 了解浏覽器解析模式:DOCTYPE聲明問題
了解浏覽器解析模式:DOCTYPE聲明問題
編輯:HTML和Xhtml     

觸發標准模式

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 />)。
任何一個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來聲明文檔,所以糾結標准、怪異模式對工作的影響不太大。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved