Quirks和Standards模式的区别

Posted 2020-10-12 不乱来的嫖客

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

 

在ie6之前CSS还不够成熟，所以IE5之前的浏览器对CSS的支持很差，IE6对CSS提供更好的支持，然而这时的问题就来了，因为有很多的页面时基于旧的布局方式写的，而如果IE6支持CSS则将令这些页面显示就不正常，如何在既保证不破坏现有的页面的情况下，又能够提供新的渲染机制呢？

 

在写程序时，我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更加强大的功能，尤其是新功能不兼容旧功能的时候，遇到这种问题的时候通常解决的办法是增加参数和分支，就是当某个参数为true是，我们就使用新功能，如果这个参数是false的时候就使用旧功能，这样就能不破坏原有的程序，又能提供新功能，IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，第一IE6就假定，如果写了DTD就意味这个页面将采用对CSS支持更好的布局，而如果没有就采用兼容之前的布局方式，这就是Quirks模式（怪癖，诡异，怪异模式）

 

 

其与Standards的区别总体会有布局、样式解析、和脚本执行三个方面的区别：；

盒模型： 在W3C标准中，如果设置与一个元素的宽度和高度，指定的元素的内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了padding和border

设置行内元素的高度：在Standerds模式下,给<span>等函内元素设置width和height都不会生效，而在Quirks模式下会生效；

设置百分比的高度： 在Standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素的设置的一个百分比的高度是无效的

margin: 0 auto设置水平居中： 标准的模式下是会生效的，而在诡异的模式下是不会是生效的