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已经是上个时代的产物,我们对他有简单的了解就好, 毕竟这个东西,现在已经不再使用了,我们基本上是用不到的