瀏覽器的兩種模式quirks mode 和strict mode

時間 2019-11-09

原文原文鏈接

在看js代碼時，有時會看到關於quirks mode(怪異模式)和strict mode(嚴格格式)的東西，一直也沒深究怎麼回事，只是零零碎碎的有些概念，最近終於受不了這種似懂非懂的感受，決定好好學習總結一下。

一、quirks mode和strict mode是瀏覽器解析css的兩種模式，或者能夠稱之爲解析方法。目前正在使用的瀏覽器這兩種模式都支持 。

二、歷史緣由。css

當早期的瀏覽器Netscape 4和Explorer 4對css進行解析時，並未遵照W3C標準，這時的解析方式就被咱們稱之爲quirks mode(怪異模式),但隨着W3C的標準愈來愈重要，衆多的瀏覽器開始依照W3C標準解析CSS，仿照W3C標準解析CSS的模式咱們叫作strict mode(嚴格模式).html

三、後來的瀏覽器雖然支持strict mode，但衆多瀏覽器並未放棄支持quirks mode。java

一個重要的緣由就是爲了以前大量在quirks mode下開發的網頁可以獲得正確的顯示。因此，這些支持兩種模式的瀏覽器當拿到一張網頁時，所作的一個前期工做就是判斷採起何種方式進行解析(判斷條件後面會說)。注：Explorer 5仍然只支持quirks modelinux

四、瀏覽器如何判斷何用哪一種方式解析CSS？web

解決方案就是採用doctype聲明，大多數瀏覽器採用下面的這些判斷規則windows

瀏覽器要使老舊的網頁正常工做，但這部分網頁是沒有doctype聲明的，因此瀏覽器對沒有doctype聲明的網頁採用quirks mode解析。

對於擁有doctype聲明的網頁，什麼瀏覽器採用何種模式解析，這裏有一張詳細列表可參考：http://hsivonen.iki.fi/doctype/

對於擁有doctype聲明的網頁，這裏有幾條簡單的規則可用於判斷：

對於那些瀏覽器不能識別的doctype聲明，瀏覽器採用strict mode解析瀏覽器

在doctype聲明中，沒有使用DTD聲明或者使用HTML4如下（不包括HTML4）的DTD聲明時，基本全部的瀏覽器都是使用quirks mode呈現，其餘的則使用strict mode解析。框架

能夠這麼說，在現有有doctype聲明的網頁，絕大多數是採用strict mode進行解析的。dom

在ie6中，若是在doctype聲明前有一個xml聲明(好比:<?xml version="1.0" encoding="iso-8859-1"?>)，則採用quirks mode解析。這條規則在ie7中已經移除了。ide

五、mozilla提出了almost strict moede ，和strict mode的區別是：

img元素在strict中是inline的，而在almost strict mode中是block的。其實咱們前面所說，在大多數瀏覽器，大多數doctype聲明觸發的是almost strict mode;

六、quirks mode和strict mode最大的不一樣就是提如今對盒模式的解釋上 ，這也是咱們在js裏要注意的地方。

什麼是盒模式？ 這是針對塊級元素說的，我這裏只簡單說一下(詳情請查閱相關資料)。說白了就是把塊級元素想像成一個裝東西的盒子，而margin,padding,border,width這些css屬性構成了盒模式。

而區別就是產生在width屬性上：

IE6 IE7 在怪異模式下盒模型是如出一轍的即width=width
IE6 IE7 在標準模式下盒模型也是如出一轍的即width=width+padding+border

看實驗：http://bbs.blueidea.com/thread-2839403-1-1.html

在strict mode中 ：

width是內容寬度 ，也就是說,元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

在quirks mode中 ：

width則是元素的實際寬度 ，內容寬度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

這裏把盒模式相關的東西記錄一下，備忘 ！

·內聯元素 ，例如<a>、<span>等，定義上下邊界不會影響到行高（line-height），內聯元素距離上一行元素的距離由行高決定，而不是填充或邊界。注2. 內聯元素（display: inline）內聯元素不須要在新行內顯示，並且也不強迫其後的元素換行，如a、em、span等都爲內聯元素。內聯元素能夠爲任何其餘元素的子元素。

·浮動元素（不管左或者右浮動）邊界不壓縮 ，且若浮動元素不聲明寬度，則其寬度趨向於0，即壓縮到其內容能承受的最小寬度。

·若是盒中沒有內容，則即便定義了寬度和高度都爲100%，實際上只佔0% ，所以不會被顯示，此點在採起層佈局的時候需特別注意。

·邊界值可爲負，其顯示效果各瀏覽器可能不相同 。

·填充值不可爲負 。

·邊框默認的樣式（border-style）爲不顯示（none） 。

七、在quirks mode 和 strict mode中還有一個區別 ，但沒通過驗證，我只是發現有這個現象。

在strict mode 中，

table的css屬性font-size會繼承父級元素的 ，也就是說，table中的字體大小會繼承父級元素字體的大小。

在quirks mode 中，

table的css屬性font-size不會繼承父級元素的 ，須要專門設置一下。也就是說，table中的字體大小不會繼承父級元素字體的大小。

八、在js中如何判斷當前瀏覽器正在以何種方式解析？
    document對象有個屬性compatMode ,它有兩個值：
        BackCompat    對應quirks mode
        CSS1Compat    對應strict mode

九、咱們在編寫跨瀏覽器兼容性的js代碼時，經常使用到的判斷代碼(來源於ext) ：

Js代碼

var ua = navigator.userAgent.toLowerCase();
var client = {
isStrict: document.compatMode == 'CSS1Compat',
isOpera: ua.indexOf('opera') > -1,
isIE: ua.indexOf('msie') > -1,
isIE7: ua.indexOf('msie 7') > -1,
isSafari: /webkit|khtml/.test(ua),
isWindows: ua.indexOf('windows') != -1 || ua.indexOf('win32') != -1,
isMac: ua.indexOf('macintosh') != -1 || ua.indexOf('mac os x') != -1,
isLinux: ua.indexOf('linux') != -1
};
client.isBorderBox = client.isIE && !client.isStrict;
client.isSafari3 = client.isSafari && !!(document.evaluate);
client.isGecko = ua.indexOf('gecko') != -1 && !client.isSafari;
/**
* You're not sill using IE6 are you?
*/
var ltIE7 = client.isIE && !client.isIE7;

var ua = navigator.userAgent.toLowerCase(); var client = { isStrict: document.compatMode == 'CSS1Compat', isOpera: ua.indexOf('opera') > -1, isIE: ua.indexOf('msie') > -1, isIE7: ua.indexOf('msie 7') > -1, isSafari: /webkit|khtml/.test(ua), isWindows: ua.indexOf('windows') != -1 || ua.indexOf('win32') != -1, isMac: ua.indexOf('macintosh') != -1 || ua.indexOf('mac os x') != -1, isLinux: ua.indexOf('linux') != -1 }; client.isBorderBox = client.isIE && !client.isStrict; client.isSafari3 = client.isSafari && !!(document.evaluate); client.isGecko = ua.indexOf('gecko') != -1 && !client.isSafari; /** * You're not sill using IE6 are you? */ var ltIE7 = client.isIE && !client.isIE7;

十、廢話 ：我不知道如今的不少js框架爲何還對解析模式進行了判斷。我認爲這些框架確定是給如今要開發的項目使用的，那應該都是strict mode纔對呀？是否是由於還有不少人不習慣給頁面加上doctype聲明呢？

原文轉自：http://kino.javaeye.com/blog/241260

如何進入Standards模式?

通常來說瀏覽器是經過DTD來判斷模式的；瀏覽器進入Standards模式的DTD有：HTML的strict.dtd和loose.dtd這兩個DTD的簡單區別是

strict去掉了許多表現的標籤，有利於結構和表現的分離
loose會致使Firefox進入Almost Standards模式，在圖片的處理上會有微小的差異

在IE6下，若是在DTD以前有任何字符都將致使其進入quirks模式

Quirks模式與Standards模式的區別

quirks和standards的區別不少均可以歸爲IE5和IE6的區別。

盒模型的高寬包含內補丁和邊框: 在W3C標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks模式下，IE的寬度和高度還包含了padding和border。IE5.5及如下的瀏覽器即便在Standards模式下，也會有這個問題
能夠設置行內元素的高寬: 在Standards模式下，給span等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效
可設置百分比的高度: 在standards模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的
用margin:0 auto設置水平居中在IE下會失效: 使用margin:0 auto在standards模式下可使元素水平居中，但在quirks模式下卻會失效,quirk模式下的解決辦法，用text-align屬性: body{text-align:center};#{content:text-align:left}
能夠設置行內元素的高寬: 在Standards模式下，給span等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效
設置圖片的padding會失效
Table中的字體屬性不能繼承上層的設置
white-space: pre會失效
許多CSS默認樣式將不一樣: 在Standards模式下，給span等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效
JavaScript中的區別: http://www.quirksmode.org/js/contents.html#general
css中的區別: http://www.quirksmode.org/css/quirksmode.html

參考

dom中的document有一個屬性叫compatMode,其返回值是BackCompat和CSS1Compat，分別對應quirks mode和strict mode

void function(){var mode=document.compatif (mode="BackCompat")alert("當前以quirks mode的方式渲染頁面");else if(mode="CSS1Compat")alert("當前已strict mode的方式渲染頁面");else alert("瀏覽器版本不支持compatMode");}()

感謝：http://lefter.net/blog/quirks-standards