doctype宣告 瀏覽器的標準 怪異等模式

2021-06-20 07:50:03 字數 4322 閱讀 5984

群裡看到乙個面試題,doctype 標準(嚴格)模式(standards mode)、怪異(混雜)模式(quirks mode),如何觸發,區分他們有何意義?

而且據說是筆試題,汗。

1、加doctype宣告,比如:

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

5、放在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:  

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寫在或標籤後:判斷"x-ua-compatible http header"。

注1:把x-ua-compatible寫在或標籤下面,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的一些說明:

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=***類似這樣不靠譜的、或把x-ua-compatible meta寫在或標籤後的,這些情況和無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:

可以和ie的x-ua-compatible混搭:比如:。這樣寫的好處:可以讓ie在最好的渲染方式下渲染頁面。

"ie=edge,chrome=1",可以寫成"chrome=1,ie=edge"、"chrome=1; ie=edge"。

firefox 1+、safari、chrome、opera(從7.5開始)和ie8/ie9增加了乙個"幾乎標準模式",它實現傳統的**單元格的垂直尺寸(沒有嚴格的遵照css2規範)。

意思就是,比如下面的**:

比如在ie7標準模式下,底部和table是沒空白的;"幾乎標準模式"下,底部和table也是沒空白的;而較新的瀏覽器在標準模式下底部和table會有個空白。

@see:

下面的doctype都可觸發ie8標準模式:

觸發ie8幾乎標準模式:

mac ie5、ie6/7、opera(<7.5)和konqueror無幾乎標準模式(它們沒有嚴格遵循css2規範,實際上,它們的標準模式更接近幾乎標準模式)。html5把這種模式叫「受限怪異模式(limited quirks mode)」。

秦歌的譯文:

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檢測瀏覽器的文章: 來做測試,先裝win8在裝ie9,然後http頭部分用程式或配置伺服器來設定。**修修改改,測了我一晚上。。

推薦看看秦歌的譯文,涉及了更多的知識,寫的更全面。我這裡只針對ie8/ie9的渲染模式做了個測試。

doctype宣告 瀏覽器的標準 怪異等模式

群裡看到乙個面試題,doctype 標準 嚴格 模式 standards mode 怪異 混雜 模式 quirks mode 如何觸發,區分他們有何意義?而且據說是筆試題,汗。1 加doctype宣告,比如 2 設定x ua compatible觸發。1 無doctype宣告 定義舊的html版本 ...

DOCTYPE的作用 文件型別與瀏覽器模式

dtd document type definition,文件型別定義 是一系列的語法規則,用來定義xml或 x html的檔案型別。瀏覽器會使用它來判斷文件型別,決定使用何種協議來解析,以及切換瀏覽器模式。事實上dtd可以定義所有sgml語族的文件型別,但由於太過繁瑣,xml schema反而更加...

常用的 DOCTYPE 宣告

該 dtd 包含所有 html 元素和屬性,但不包括展示性的和棄用的元素 比如 font 不允許框架集 framesets 該 dtd 包含所有 html 元素和屬性,包括展示性的和棄用的元素 比如 font 不允許框架集 framesets 該 dtd 等同於 html 4.01 transiti...