浏覽器Quirksmode與CSS1compat

Quirks mode(怪異模式)和Standars mode(标準模式)

由于曆史的原因，各個浏覽器在對頁面的渲染上存在差異，甚至同一浏覽器在不同版本中，對頁面的渲染也不同。在W3C标準出台以前，浏覽器在對頁面的渲染上沒有統一規範，産生了差異(Quirks mode或者稱為Compatibility Mode)；由于W3C标準的推出，浏覽器渲染頁面有了統一的标準(CSScompat或稱為Strict mode也有叫做Standars mode)，這就是二者最簡單的差別。

     W3C标準推出以後，浏覽器都開始采納新标準，但存在一個問題就是如何保證舊的網頁還能繼續浏覽，在标準出來以前，很多頁面都是根據舊的渲染方法編寫的，如果用的标準來渲染，将導緻頁面顯示異常。為保持浏覽器渲染的相容性，使以前的頁面能夠正常浏覽，浏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣浏覽器渲染上就産生了Quircks mode和Standars mode，兩種渲染方法共存在一個浏覽器上。

     那麼浏覽器究竟該采用哪種模式渲染呢？這就引出的DTD，既是網頁的頭部聲明，浏覽器會通過識别DTD而采用相對應的渲染模式：

1. 浏覽器要使老舊的網頁正常工作，但這部分網頁是沒有doctype聲明的，是以浏覽器對沒有doctype聲明的網頁采用quirks mode解析。   

2. 對于擁有doctype聲明的網頁，什麼浏覽器采用何種模式解析，這裡有一張詳細清單可參考：http://hsivonen.iki.fi/doctype/   

3. 對于擁有doctype聲明的網頁，這裡有幾條簡單的規則可用于判斷：對于那些浏覽器不能識别的doctype聲明，浏覽器采用strict mode解析

4. 在doctype聲明中，沒有使用DTD聲明或者使用HTML4以下（不包括HTML4）的DTD聲明時，基本所有的浏覽器都是使用quirks mode呈現，其他的則使用strict mode解析。

5. 可以這麼說，在現有有doctype聲明的網頁，絕大多數是采用strict mode進行解析的。

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

     Quirks mode和Standars mode最大的不同就是提現在對盒模式的解釋上，這也是我們在js裡要注意的地方。

     什麼是盒模式？ 這是針對塊級元素說的，說白了就是把塊級元素想像成一個裝東西的盒子，而margin,padding,border,width這些css屬性構成了盒模式。   

在Standars mode中： 

元素真正的寬度 = 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)

1. 内聯元素 ，例如<a>|<span>等，定義上下邊界不會影響到行高（line-height），内聯元素距離上一行元素的距離由行高決定，而不是填充或邊界。   

2.   内聯元素（display: inline） 内聯元素不需要在新行内顯示，而且也不強迫其後的元素換行，如a|em|span等都為内聯元素。内聯元素可以為任何其他元素的子元素。

3. 浮動元素（無論左或者右浮動）邊界不壓縮 ，且若浮動元素不聲明寬度，則其寬度趨向于0，即壓縮到其内容能承受的最小寬度。   

4. 如果盒中沒有内容，則即使定義了寬度和高度都為100%，實際上隻占0% ，是以不會被顯示，此點在采取層布局的時候需特别注意。   

5. 邊界值可為負，其顯示效果各浏覽器可能不相同。   

6. 填充值不可為負。   

7. 邊框預設的樣式（border-style）為不顯示（none）。

在js中如何判斷目前浏覽器正在以何種方式解析？     

document對象有個屬性compatMode ,它有兩個值：

BackCompat     對應quirks mode

CSS1Compat     對應strict mode 

各浏覽器的相容性表，可以檢視PPK的網站：  

http://www.quirksmode.org/compatibility.html