浏览器怪异模型和标准模型的区别

  从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。浏览器

  在IE6以前CSS还不够成熟，因此IE5等以前的浏览器对CSS的支持不好， IE6将对CSS提供更好的支持，然而这时的问题就来了，由于有不少页面是基于旧的布局方式写的，而若是IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？布局

  在写程序时咱们也会常常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤为是新功能不兼容旧功能时。遇到这种问题时的一个常见作法是增长参数和分支，即当某个参数为真时，咱们就使用新功能，而若是这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是相似这样作的，它将DTD（文档类型定义）当成了这个“参数”，由于之前的页面你们都不会去写DTD，因此IE6就假定 字体

  DTD是为英文*Document Type Definition，中文意思为“文档类定义”。ui

  若是写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而若是没有，则采用兼容以前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。spa

他们的区别：

1. 在严格模式中 ：给元素设置的 宽度 = content;在怪癖模式中 ：给元素设置的 宽度 = content+padding+border

2. 能够设置行内元素的高宽code

   • 在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会失效