Quirks模式與Standards模式的區別
阿新 • • 發佈：2019-01-29
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}
設定圖片的padding會失效
Table中的字型屬性不能繼承上層的設定
white-space: pre會失效
許多CSS預設樣式將不同
在Standards模式下，給span等行內元素設定wdith和height都不會生效，而在quirks模式下，則會生效
這些都不用怎麼去管了，以前的版本誰在意呢。如何避免預設quirk模式呢，一是設定doctype，二是doctype前不允許有任何字元（空字元除外），因為一旦發現有字元在文件首瀏覽器將會輸出其在body並將字元與<HTML>之間的標記<!***>用<!---->註釋起來，那麼文件內容將無doctype設定。
這裡測試的僅為IE9，其他瀏覽器未知。
盒模型的高寬包含內補丁和邊框
在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}
設定圖片的padding會失效
Table中的字型屬性不能繼承上層的設定
white-space: pre會失效
許多CSS預設樣式將不同
在Standards模式下，給span等行內元素設定wdith和height都不會生效，而在quirks模式下，則會生效
這些都不用怎麼去管了，以前的版本誰在意呢。如何避免預設quirk模式呢，一是設定doctype，二是doctype前不允許有任何字元（空字元除外），因為一旦發現有字元在文件首瀏覽器將會輸出其在body並將字元與<HTML>之間的標記<!***>用<!---->註釋起來，那麼文件內容將無doctype設定。
這裡測試的僅為IE9，其他瀏覽器未知。