浏览器怪异模式和标准模式之间的区别 DTD

从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>