从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？
在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD（文档类型定义）当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定
DTD是为英文*Document Type Definition，中文意思为“文档类定义”。
如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。
他们的区别：
-
在严格模式中 ：给元素设置的 宽度 = content;在怪癖模式中 ：给元素设置的 宽度 = content+padding+border
-
可以设置行内元素的高宽
- 在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}
-
quirk模式下设置图片的padding会失效
-
quirk模式下Table中的字体属性不能继承上层的设置
-
quirk模式下white-space:pre会失效
（1 ）盒模型：
在怪异模式下，盒模型为IE盒模型，
image.png
而在W3C标准的盒模型中为
image.png
（2）图片元素的垂直对齐方式：
对于inline元素和table-cell元素，标准模式下vertical-align属性默认取值为baseline，在怪异模式下，table单元格中的图片的vertical-align属性默认取值为bottom，因此在图片底部会有及像素的空间。
（3）<table>元素中的字体：
CSS中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素中继承得到，特别是font-size属性。
（4）内联元素的尺寸：
标准模式下，non-replaced inline元素无法自定义大小，怪异模式下，定义这些元素的width，height属性可以影响这些元素显示的尺寸。
（5）元素的百分比高度：
a：CSS中对于元素的百分比高度规定如下：百分比为元素包含块的高度，不可为负值，如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须在父元素有高度声明的情况下使用。
b：当一个元素使用百分比高度时，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被正确应用。
（6）元素溢出的处理：
标准模式下，overflow取默认值visible，在怪异模式下，该溢出会被当做扩展box来对待，即元素的大小由其内容决定，溢出不会裁减，元素框自动调整，包含溢出内容。
网友评论