由於歷史的原因，不同瀏覽器對頁面的渲染是不同的，甚至同一瀏覽器的不同版本也是不同的。在W3C標準出臺之前，不同的瀏覽器在頁面的渲染上沒有同一的規範，產生了差異，即Quirks mode(怪異模式或兼容模式)；當W3C標準出臺之後，不同瀏覽器對頁面的渲染有了統一的標準,即Strict mode（標準模式或嚴格模式）；這就是兩者之間的區別。
W3C標準推出前，舊的頁面都是根據舊的渲染方式對頁面進行渲染的，因此在W3C標準推出後爲了保證舊頁面的正常顯示，保持瀏覽器的兼容性，這樣瀏覽器上就產生了能夠兼容W3C標準渲染的嚴格模式和保證舊頁面顯示的怪異模式的標準兼容模式。
在標準模式中，瀏覽器根據規範呈現頁面；在混雜模式中，頁面以一種比較寬鬆的向後兼容的方式顯示。
如果XHTML文檔包含形式完整的DOCTYPE，那麼它一般以標準模式呈現。對於HTML 4.01文檔，包含嚴格DTD的DOCTYPE常常導致頁面以標準模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標準模式呈現，但是有過渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。
區別是：
1）在嚴格模式中 ：width是內容寬度 ，元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +
margin-right; 在怪癖模式中 ：width則是元素的實際寬度 ，內容寬度 = width - ( padding-left
+ padding-right + border-left-width + border-right-width)
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會失效