大家好，我是IT修真院深圳分院第01期學(xué)員钾腺，一枚正直善良的web程序員讥裤。
今天給大家分享一下，修真院官網(wǎng) CSS任務(wù)中可能會使用到的知識點：
quirks模式是什么间螟？它和standards模式有什么區(qū)別?
1.背景介紹
? ? ? ?什么是 Quirks Mode? 簡單來說剧辐，Quirks Mode 就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設(shè)計、并未嚴格遵循 W3C 標準的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式
? ? ? ?Quirks Mode是一種瀏覽器（像IE溉奕，F(xiàn)irefox忍啤，Opera）操作模式仙辟。 從根本上說鳄梅，怪異模式（也稱之為兼容模式）意味著一個相對新的瀏覽器故意模擬許多在舊瀏覽器中存在的bug，特別是在IE4和IE5中粟焊。
2.知識剖析
? ? ? ?Quirks Mode是由文檔類型探查法觸發(fā)孙蒙。也就是大家熟知的文檔類型切換。這意味著瀏覽器檢查一個HTML文檔的開始香追，看它是否包含一個HTML規(guī)范所要求的文檔類型聲明坦胶。
? ? ? ?Quirks Mode的目標是使舊頁面顯示出他們的作者想要的那樣。舊頁面可能利用舊瀏覽器已知的特性寫成峭咒，或者至少是適應(yīng)舊瀏覽器纪岁。
? ? ? ?Quirks Mode是什么沒有權(quán)威的規(guī)范。畢竟，實質(zhì)上Quirk Mode是一個故意違反CSS和HTML的規(guī)范短条。
3.常見問題
現(xiàn)代瀏覽器在Quirks Mode下茸时，頁面會發(fā)生哪些變化，怎么樣去避免
1.在Quirks Mode下可都，為body設(shè)置一個margin是無效的渠牲。
2.默認情況下，IE有一個垂直滾動條签杈，盡管當沒有東西可以滾動的時候，它是非活動狀態(tài)（遲鈍狀態(tài)）铣除，在Quirks Mode下，你可以通過設(shè)置body { overflow: auto;}刪除它（當不需要它的時候）择卦，但是在標準模式下郎嫁，你仍然需要增加html { overflow: auto;}。
3.默認的浮動圖片的水平margin是3像素（而不是0）秕噪。
4.在CSS中厚宰，使用margin: 0 auto使一個塊居中是無效的。澈蝙；
5.字體屬性不會從body或其他封閉元素繼承到table中撵幽。特別是font-size。字體逗载，顏色链烈，行高也都有可能。
4.解決方案
? ? ? ?2000 年 1 月 5 日擦秽，微軟發(fā)表聲明要發(fā)布 「IE5 for Mac」漩勤。 我們先不要驚嘆 IE 居然開發(fā)過 Mac 版本， 也不要驚訝 Mac 版本的 IE2 到 IE5 存在了長達十年触幼，更不要驚呼 IE for Mac 作為 Mac 的默認瀏覽器存在了五六年的時間究飞。 以當時的眼光來說巨双，那個時候的 IE5 非常先進霉祸，它完全實現(xiàn)了當時最新的 html 標準「HTML 4.0」。但是隨之而來的問題是慢宗， 對于一些舊的網(wǎng)頁卻不能正確的呈現(xiàn)（或者說奔穿，他們是被 正確渲染了）， 那些網(wǎng)頁是按照當時占統(tǒng)治地位的瀏覽器的渲染模式來渲染的缅茉，IE5 肯定不能就這樣發(fā)布男摧。
? ? ? ?微軟想到了一個解決方案，沒錯拇颅，這就是「DOCTYPE」乔询。DOCTYPE， 或者稱為 Document Type Declaration（文檔類型聲明黄锤，縮寫 DTD）食拜。通常情況下，DOCTYPE 位于一個 HTML 文檔的最前面的位置， 位于根元素 HTML 的起始標簽之前惑惶。這樣一來短纵，在瀏覽器解析 HTML 文檔正文之前就可以確定當前文檔的類型， 以決定其需要采用的渲染模式（不同的渲染 模式會影響到瀏覽器對于 CSS 代碼甚至 JavaScript 腳本的解析）鱼冀。 在寫程序時我們也會經(jīng)常遇到這樣的問題，如何保證原來的接口不變充易，又提供更強大的功能了荸型，尤其是新功能 不兼容舊功能時。 遇到這種問題時的一個常見做法 是增加參數(shù)和分支稿静，即當某個參數(shù)為真時辕狰，我們就使用新功能，而如果這個參數(shù) 不為真時悬钳， 就使用舊功能柬脸，這樣就能不破壞原 有的程序，又提供新功能灾测。
5.編碼實戰(zhàn)
? ? ? ?如果寫了DTD垦巴，就意味著這個頁面將采用對CSS支持更好的布局，這就是標準模式秦爆，而如果沒有憔披，則采用兼容之前的布局方式。這就是Quirks模式 （怪癖模式望门，詭異模式锰霜，怪異模式）〕簦總結(jié)起來，混雜模式是不符合 Web 標準的模式陶衅，準標準模式是幾乎要符合標準的模式钾唬，標準模式是符合標準的模式。 我們可以使用不同的 doctype 來激活不同的模式奕巍。
下面解釋每種doctype的意義
當 doctype 信息為：
“!DOCTYPE html”
時儒士，表明該頁面是遵守了 HTML5 規(guī)范的着撩，瀏覽器會選擇 Standards Mode，這種 doctype 是最推薦的一種拖叙，我們平時設(shè)計頁面都應(yīng)該加上這一個 doctype薯鳍。
當 doctype 信息為：
“!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"”
時，瀏覽器同樣會選擇 Standards Mode崩溪，雖然和第一種 doctype 有一些區(qū)別斩松，但是幾乎可以認為是一樣的。
當 doctype 信息為：
“!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"”
時乳幸，瀏覽器會選擇 Almost Standards Mode钧椰，需要注意的是如果今后需要把這個頁面重新改為 HTML5 規(guī)范，那么table標簽中的分割圖片問題可能會錯亂。
當 doctype 缺失（不注明秒际、寫錯）的時候，瀏覽器會選擇 Quirks Mode闽颇，這是非常不推薦的方式寄锐，我們應(yīng)該盡量避免 Quirks Mode，這對一個 web 應(yīng)用是非常不利的地方剩膘。
6.擴展思考
? ? ? ?如何查看當前的 Document Mode?
一盆顾、
IE 中，用戶可以在 developer tools 中切換模式奈懒，如圖 1 所示宪巨，IE10 的六種文檔模式都被顯示在 Document Mode 菜單下，用戶可以直接選擇极祸。
圖 1 IE Document Mode
二贿肩、
除了從 developer tools 中查看龄寞，還有可以從 document 對象的屬性 compatMode 中獲知文檔模式，這個屬性只有兩個值 BackCompat 和 CSS1Compat溜哮，前者對應(yīng)的是 Quirks Mode 后者對應(yīng) Standards Mode色解。在 developer tools 中切換文檔模式時拍摇，頁面會自動刷新扼劈，compatMode 的值也會隨之改變蝌矛。
通過JavaScript打印一下
彈出CSS1Compat
document對象有個屬性compatMode ,它有兩個值：
BackCompat 對應(yīng)quirks mode
CSS1Compat 對應(yīng)strict mode
7.參考文獻
(轉(zhuǎn))Quirks模式與standards模式區(qū)別
(轉(zhuǎn))瀏覽器標準模式和怪異模式之間的區(qū)別是什么隆豹？
(轉(zhuǎn))怪異模式（Quirks Mode）對 HTML 頁面的影響
8.更多討論
詳見視頻：
quirks模式是什么茅逮？它和standards模式有什么區(qū)別_騰訊視頻
