群裡看到乙個面試題,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...