瀏覽器怪異模型和標準模型的區別

  從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規範上的正確處理達到在指定瀏覽器中的程度。

  在IE6以前CSS還不夠成熟，因此IE5等以前的瀏覽器對CSS的支持不好， IE6將對CSS提供更好的支持，然而這時的問題就來了，由於有不少頁面是基於舊的佈局方式寫的，而若是IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？

  在寫程序時咱們也會常常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤爲是新功能不兼容舊功能時。遇到這種問題時的一個常見作法是增長參數和分支，即當某個參數爲真時，咱們就使用新功能，而若是這個參數 不爲真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是相似這樣作的，它將DTD（文檔類型定義）當成了這個「參數」，由於之前的頁面你們都不會去寫DTD，因此IE6就假定

  DTD是爲英文*Document Type Definition，中文意思爲「文檔類定義」。

  若是寫了DTD，就意味着這個頁面將採用對CSS支持更好的佈局，而若是沒有，則採用兼容以前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

 

他們的區別：

1. 在嚴格模式中 ：給元素設置的 寬度 = content;在怪癖模式中 ：給元素設置的 寬度 = content+padding+border

2. 能夠設置行內元素的高寬

   • 在Standards模式下，給span等行內元素設置wdith和height都不會生效
   • 在quirks模式下，則會生效。

3. 可設置百分比的高度

   • 在standards模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置高度，子元素設置一個百分比的高度是無效的

4. 用margin:0 auto設置水平居中在IE下會失效

   • 使用margin:0 auto在standards模式下能夠使元素水平居中
   • 但在quirks模式下卻會失效;

   • quirk模式下的解決辦法，用text-align屬性:

     body{text-align:center};
     #content{text-align:left}

5. quirk模式下設置圖片的padding會失效
6. quirk模式下Table中的字體屬性不能繼承上層的設置
7. quirk模式下white-space:pre會失效