怪异模式(也称之为兼容模式),Quirks Mode是一种浏览器操作模式。一个相对新的浏览器故意模拟许多在旧浏览器中存在的bug。Quirks Mode的目标是使旧页面显示出他们的作者想要的那样。Quirks Mode是由文档类型探查法触发。也就是大家熟知的文档类型切换。这意味着浏览器检查一个HTML文档的开始,看它是否包含一个HTML规范所要求的文档类型声明。
Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
如果写了文档类型定义(DOCTYPE),就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。没有DOCTYPE的文档用怪异模式,但是有DOCTYPE不一定不一定不用怪异模式。
通过document.compatMode属性可以确定使用的模式
if(typeof document.compatMode != "undefined" &&/CSS1Compat/.test(document.compatMode)){
alert("标准模式");
}esle{
alert("怪异模式");
}
区别:Quirks Mode比较宽松对某些规则不强求。
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。
设置行内元素的高宽:在Standards模式下,给<span>等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。
设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的
用margin:0 auto设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。