大家好，我是IT修真院深圳分院第01期學(xué)員，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網(wǎng) CSS任務(wù)中可能會(huì)使用到的知識(shí)點(diǎn)：
quirks模式是什么？它和standards模式有什么區(qū)別?
1.背景介紹
? ? ? ?什么是 Quirks Mode? 簡(jiǎn)單來說，Quirks Mode 就是瀏覽器為了兼容很早之前針對(duì)舊版本瀏覽器設(shè)計(jì)、并未嚴(yán)格遵循 W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式
? ? ? ?Quirks Mode是一種瀏覽器（像IE，F(xiàn)irefox，Opera）操作模式。 從根本上說，怪異模式（也稱之為兼容模式）意味著一個(gè)相對(duì)新的瀏覽器故意模擬許多在舊瀏覽器中存在的bug，特別是在IE4和IE5中。
2.知識(shí)剖析
? ? ? ?Quirks Mode是由文檔類型探查法觸發(fā)。也就是大家熟知的文檔類型切換。這意味著瀏覽器檢查一個(gè)HTML文檔的開始，看它是否包含一個(gè)HTML規(guī)范所要求的文檔類型聲明。
? ? ? ?Quirks Mode的目標(biāo)是使舊頁面顯示出他們的作者想要的那樣。舊頁面可能利用舊瀏覽器已知的特性寫成，或者至少是適應(yīng)舊瀏覽器。
? ? ? ?Quirks Mode是什么沒有權(quán)威的規(guī)范。畢竟，實(shí)質(zhì)上Quirk Mode是一個(gè)故意違反CSS和HTML的規(guī)范。
3.常見問題
現(xiàn)代瀏覽器在Quirks Mode下，頁面會(huì)發(fā)生哪些變化，怎么樣去避免
1.在Quirks Mode下，為body設(shè)置一個(gè)margin是無效的。
2.默認(rèn)情況下，IE有一個(gè)垂直滾動(dòng)條，盡管當(dāng)沒有東西可以滾動(dòng)的時(shí)候，它是非活動(dòng)狀態(tài)（遲鈍狀態(tài)），在Quirks Mode下，你可以通過設(shè)置body { overflow: auto;}刪除它（當(dāng)不需要它的時(shí)候），但是在標(biāo)準(zhǔn)模式下，你仍然需要增加html { overflow: auto;}。
3.默認(rèn)的浮動(dòng)圖片的水平margin是3像素（而不是0）。
4.在CSS中，使用margin: 0 auto使一個(gè)塊居中是無效的。；
5.字體屬性不會(huì)從body或其他封閉元素繼承到table中。特別是font-size。字體，顏色，行高也都有可能。
4.解決方案
? ? ? ?2000 年 1 月 5 日，微軟發(fā)表聲明要發(fā)布 「IE5 for Mac」。 我們先不要驚嘆 IE 居然開發(fā)過 Mac 版本， 也不要驚訝 Mac 版本的 IE2 到 IE5 存在了長(zhǎng)達(dá)十年，更不要驚呼 IE for Mac 作為 Mac 的默認(rèn)瀏覽器存在了五六年的時(shí)間。 以當(dāng)時(shí)的眼光來說，那個(gè)時(shí)候的 IE5 非常先進(jìn)，它完全實(shí)現(xiàn)了當(dāng)時(shí)最新的 html 標(biāo)準(zhǔn)「HTML 4.0」。但是隨之而來的問題是， 對(duì)于一些舊的網(wǎng)頁卻不能正確的呈現(xiàn)（或者說，他們是被 正確渲染了）， 那些網(wǎng)頁是按照當(dāng)時(shí)占統(tǒng)治地位的瀏覽器的渲染模式來渲染的，IE5 肯定不能就這樣發(fā)布。
? ? ? ?微軟想到了一個(gè)解決方案，沒錯(cuò)，這就是「DOCTYPE」。DOCTYPE， 或者稱為 Document Type Declaration（文檔類型聲明，縮寫 DTD）。通常情況下，DOCTYPE 位于一個(gè) HTML 文檔的最前面的位置， 位于根元素 HTML 的起始標(biāo)簽之前。這樣一來，在瀏覽器解析 HTML 文檔正文之前就可以確定當(dāng)前文檔的類型， 以決定其需要采用的渲染模式（不同的渲染 模式會(huì)影響到瀏覽器對(duì)于 CSS 代碼甚至 JavaScript 腳本的解析）。 在寫程序時(shí)我們也會(huì)經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強(qiáng)大的功能了，尤其是新功能 不兼容舊功能時(shí)。 遇到這種問題時(shí)的一個(gè)常見做法 是增加參數(shù)和分支，即當(dāng)某個(gè)參數(shù)為真時(shí)，我們就使用新功能，而如果這個(gè)參數(shù) 不為真時(shí)， 就使用舊功能，這樣就能不破壞原 有的程序，又提供新功能。
5.編碼實(shí)戰(zhàn)
? ? ? ?如果寫了DTD，就意味著這個(gè)頁面將采用對(duì)CSS支持更好的布局，這就是標(biāo)準(zhǔn)模式，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式 （怪癖模式，詭異模式，怪異模式）?？偨Y(jié)起來，混雜模式是不符合 Web 標(biāo)準(zhǔn)的模式，準(zhǔn)標(biāo)準(zhǔn)模式是幾乎要符合標(biāo)準(zhǔn)的模式，標(biāo)準(zhǔn)模式是符合標(biāo)準(zhǔn)的模式。 我們可以使用不同的 doctype 來激活不同的模式。
下面解釋每種doctype的意義
當(dāng) doctype 信息為：
“!DOCTYPE html”
時(shí)，表明該頁面是遵守了 HTML5 規(guī)范的，瀏覽器會(huì)選擇 Standards Mode，這種 doctype 是最推薦的一種，我們平時(shí)設(shè)計(jì)頁面都應(yīng)該加上這一個(gè) doctype。
當(dāng) doctype 信息為：
“!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"”
時(shí)，瀏覽器同樣會(huì)選擇 Standards Mode，雖然和第一種 doctype 有一些區(qū)別，但是幾乎可以認(rèn)為是一樣的。
當(dāng) doctype 信息為：
“!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"”
時(shí)，瀏覽器會(huì)選擇 Almost Standards Mode，需要注意的是如果今后需要把這個(gè)頁面重新改為 HTML5 規(guī)范，那么table標(biāo)簽中的分割圖片問題可能會(huì)錯(cuò)亂。
當(dāng) doctype 缺失（不注明、寫錯(cuò)）的時(shí)候，瀏覽器會(huì)選擇 Quirks Mode，這是非常不推薦的方式，我們應(yīng)該盡量避免 Quirks Mode，這對(duì)一個(gè) web 應(yīng)用是非常不利的地方。
6.擴(kuò)展思考
? ? ? ?如何查看當(dāng)前的 Document Mode?
一、
IE 中，用戶可以在 developer tools 中切換模式，如圖 1 所示，IE10 的六種文檔模式都被顯示在 Document Mode 菜單下，用戶可以直接選擇。
圖 1 IE Document Mode
二、
除了從 developer tools 中查看，還有可以從 document 對(duì)象的屬性 compatMode 中獲知文檔模式，這個(gè)屬性只有兩個(gè)值 BackCompat 和 CSS1Compat，前者對(duì)應(yīng)的是 Quirks Mode 后者對(duì)應(yīng) Standards Mode。在 developer tools 中切換文檔模式時(shí)，頁面會(huì)自動(dòng)刷新，compatMode 的值也會(huì)隨之改變。
通過JavaScript打印一下
彈出CSS1Compat
document對(duì)象有個(gè)屬性compatMode ,它有兩個(gè)值：
BackCompat 對(duì)應(yīng)quirks mode
CSS1Compat 對(duì)應(yīng)strict mode
7.參考文獻(xiàn)
(轉(zhuǎn))Quirks模式與standards模式區(qū)別
(轉(zhuǎn))瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？
(轉(zhuǎn))怪異模式（Quirks Mode）對(duì) HTML 頁面的影響
8.更多討論
詳見視頻：
quirks模式是什么？它和standards模式有什么區(qū)別_騰訊視頻
