HTML文档根据文档顶部的doctype声明来决定渲染模式,有标准模式(Standards Mode)与怪异模式(Quirks mode,或叫做混杂模式)两种模式。
IE5及以前默认总是表现为怪异模式,IE6~IE8遇到非正常声明或特定声明时也会进入怪异模式。
否则,如果有正确声明doctype并在顶端,则默认进入标准模式,即包括HTML5声明在IE6~IE8,也会进入标准模式,而非一定需要HTML4长长的声明。
而许多现代浏览器即使是怪异模式,表现也和标准模式是一致的。
IE6+进入怪异模式的条件:
1.IE6~IE8没有doctype的页面是在怪异模式下渲染。
2.在文档类型定义之前出现非空格和换行字符,浏览器也会激活怪异模式。
3.除上述两种情况外,有一些特殊声明时用来特定激活怪异模式的。
具体见下表,删减至只考虑中国市场常用浏览器(来自《Activating Browser Modes with Doctype》)
标准模式与怪异模式下导致的和模型区别:
需要知道的是,盒模型差异是两种模式导致的最重要的区别之一,但是IE一些其他的BUG,即使是在标准模式下,仍然需要通过HACK解决,而并非处于标准模式下则没有BUG。
Box model :标准模式width=content,怪异模式width=content+padding+border
例外:即使是标准模式下,button总是应用border-box,现代浏览器为了表现一致,默认添加了box-sizing:border-box属性,故在button的高度上仍然要考虑border而影响的高度,即设置height=height+border*2。
另外,button在现代浏览器中总是表现为基于垂直对齐,在IE7~8中表现为顶部对齐,在IE6中表现为基线对齐,故需要设置vertical-align:middle初始化让所有表现一致。
参考自《Quirks mode and strict mode》