什么是QUIRKS模式？跟STANDERDS有什么区别

大家好，我是IT修真院武汉第10期学院，一枚正直、纯洁、善良的前端程序员。

今天给大家分享一下，修真院官网任务task15，深度思考的知识点——什么是QUIRKS模式？跟STANDERDS有什么区别。

1.背景介绍

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

2.知识剖析

standerds模式

从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。 在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差，IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？

Quirks模式的产生

IE6也是类似这样做的，它将DTD（文档类型定义）当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

3.常见问题

标准模式与怪异模式的两个常见区别

盒模型的处理差异：标准CSS盒模型的宽度和高度等于内容区的高度和宽度，不包含内边距和边框，而IE6之前的浏览器实现的盒模型的宽高计算方式是包含内边距和边框的。因此，对于IE，怪异模式和标准模式下的盒模型宽高计算方式是不一样的；

行内元素的垂直对齐：很多早期的浏览器对齐图片至包含它们的盒子的下边框，虽然CSS的规范要求它们被对齐至盒内文本的基线。标准模式下，基于Gecko的浏览器将会对齐至基线，而在quirks模式下它们会对齐至底部。最直接的例子就是图片的显示。在标准模式下，图片并不是与父元素的下边框对齐的，如果仔细观察，你会发现图片与父元素下边框之间存在一点小空隙。那是因为标准模式下，图片是基线对齐的。而怪异模式下，则不存在这个问题。

4.解决方案

如何触发它们：

XHTML文档中只要包含形式完整的DOCTYPE,那么它一般就会以标准模式表现。

HTML4 文档，包含严格DTD的DOCTYPE会以标准模式表现。

5.编码实战

6.扩展思考

如何查看当前的 Document Model?

IE浏览器可以按F12，点击”仿真",就可以选择使用什么版本的浏览器。

7.参考文献

浏览器的标准模式与怪异模式

QUIRKS模式和STANDARDS模式的区别

8.更多讨论

问：为什么不推荐使用Quirks Model？

答：Quirks Model只是当时为了解决技术没跟上规则的临时性办法，并不推荐现代浏览器使用；

问：Quirks Mode中发生了什么？

答：上文有提到，主要体现在两个地方——1.盒模型。2.行内元素对齐。

问：Quirks 和 Standards 之外还有什么模式？

答：还有一个参杂与两者之间的模式——混杂模式，在支持标准浏览器规则的同时，也支持一些“怪异模式”的实现。

详情请看：

视频链接

PPT链接

感谢大家观看！

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~