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

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

在寫程式時我們也會經常遇到這樣的問題，如何保證原來的介面不變，又提供更強大的功能，尤其是新功能不相容舊功能時。遇到這種問題時的一個常見做法是增加引數和分支，即當某個引數為真時，我們就使用新功能，而如果這個引數 不為真時，就使用舊功能，這樣就能不破壞原有的程式，又提供新功能。IE6也是類似這樣做的，它將DTD（文件型別定義）當成了這個“引數”，因為以前的頁面大家都不會去寫DTD，所以IE6

DTD是為英文Document Type Definition，中文意思為“文件類定義”。

如果寫了DTD，就意味著這個頁面將採用對CSS支援更好的佈局，而如果沒有，則採用相容之前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

他們的區別：

<pre id="best-content-1756522211" class="best-text mb-10" name="code" style="white-space: pre-wrap; word-wrap: break-word; margin-top: 0px; margin-bottom: 10px; padding: 0px; font-family: arial, "courier new", courier, 宋體, monospace; line-height: 24px; background-color: rgb(241, 254, 221);"><span style="color: rgb(255, 0, 0); font-family: "Hiragino Sans GB W3", "Hiragino Sans GB", Arial, Helvetica, simsun, u5b8bu4f53; line-height: 24.5px; background-color: rgb(204, 206, 208);"><span style="white-space:pre">	</span>1.在嚴格模式中 ：給元素設定的</span><span style="color: rgb(255, 0, 0); font-family: "Hiragino Sans GB W3", "Hiragino Sans GB", Arial, Helvetica, simsun, u5b8bu4f53; line-height: 24.5px; background-color: rgb(204, 206, 208);">寬度 =  content </span>

<span style="font-family: "Hiragino Sans GB W3", "Hiragino Sans GB", Arial, Helvetica, simsun, u5b8bu4f53; line-height: 24.5px; background-color: rgb(204, 206, 208);"><span style="color: rgb(255, 0, 0); line-height: 24.5px;"><span style="white-space:pre">	</span>在怪癖模式中 ：給元素設定的<span style="line-height: 24.5px;">寬度</span><span style="background-color: rgb(241, 254, 221); color: rgb(51, 51, 51); font-family: arial, "courier new", courier, 宋體, monospace;"> = content+padding+border</span>
</span><span style="color: rgb(255, 0, 0);">
</span></span>

<span style="font-family: "Hiragino Sans GB W3", "Hiragino Sans GB", Arial, Helvetica, simsun, u5b8bu4f53; line-height: 24.5px; background-color: rgb(204, 206, 208);"><span style="color: rgb(255, 0, 0); line-height: 24.5px;"></span></span><p style="font-family: Arial; line-height: 26px;"><span style="white-space:pre">	</span>2）可以設定行內元素的高寬</p><p style="font-family: Arial; line-height: 26px;">    在Standards模式下，給span等行內元素設定wdith和height都不會生效，而在quirks模式下，則會生效。</p><p style="font-family: Arial; line-height: 26px;"><span style="white-space:pre">	</span>3）可設定百分比的高度</p><p style="font-family: Arial; line-height: 26px;">    在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設定高度，子元素設定一個百分比的高度是無效的。</p><p style="font-family: Arial; line-height: 26px;"><span style="white-space:pre">	</span>4）用margin:0 auto設定水平居中在IE下會失效</p><p style="font-family: Arial; line-height: 26px;">    使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效,quirk模式下的解決辦法，用text-align屬性:</p><p style="font-family: Arial; line-height: 26px;">   body{text-align:center};#content{text-align:left}</p><p style="font-family: Arial; line-height: 26px;"><span style="white-space:pre">	</span>5）quirk模式下設定圖片的padding會失效</p><p style="font-family: Arial; line-height: 26px;"><span style="white-space:pre">	</span>6）quirk模式下Table中的字型屬性不能繼承上層的設定</p><p style="font-family: Arial; line-height: 26px;"><span style="white-space:pre">	</span>7）quirk模式下white-space:pre會失效</p><div>
</div>