QUIRKS模式和STANDARDS模式的区别

1.背景介绍

quirks模式是浏览器的怪异模式，该模式下浏览器对页面的渲染会比较怪异

我们平时使用的都是standards模式，又称strict模式

2：QUIRKS来历

在W3C标准出台以前， 浏览器在对页面的渲染上没有统一规范，产生了差异 (Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出， 浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)， 这就是二者最简单的区别。

W3C标准推出以后，浏览器都开始采纳新标准， 在标准出来以前，很多页面都是根据旧的渲染方法编写的，

如果使用新的标准来渲染，将导致页面显示异常。

使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法 这样浏览器渲染上就产生了Quircks mode和Standars mode， 两种渲染方法共存在一个浏览器上。

3：如何开启浏览器的QUIRKS模式呢

关键在于html文件第一行的声明，!doctype html 如果我们把这一行删除掉，或者在这一行随意加上几个字母， 使浏览器无法识别，那么就开启了浏览器的quirks模式

4：如何确认是不是开启了quirks模式

在js中使用这个代码

document.compatMode:

如果输出结果为backCompat，则开启了quirks模式

如果输出结果为css1compat，则开启的是standards模式

5：那么quirks模式到底和我们日常使用的strict模式有什么区别呢

据本人在网上搜索的资料，最大的区别在于盒模型

在我们学习盒模型中

元素实际宽度=margin*2+border*2+padding*2+width

但是据资料显示，在quirks模式中，

元素内容宽度=width-margin*2-border*2-padding*2

但是经过demo，我们发现，在quirks模式下，有些特性和资料显示不符， 搜索相关资料发现，盒模型的差异，很有可能只存在于ie6中，

经过确认的区别有一个，在严格模式下，给块级元素直接设置height:10%,设置百分比高度是无效的，但是在quirks模式下，百分比高度是有效的

6：总结

quriks已经是上个时代的产物，我们对他有简单的了解就好， 毕竟这个东西，现在已经不再使用了，我们基本上是用不到的