HTML文档模式与盒模型
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》）
|
Doctype |
HTML5 |
IE 8, IE 9 |
IE 7 |
IE 6 |
|
Q |
Q |
Q |
Q |
|
|
S |
S |
A |
A |
|
|
? |
? |
? |
? |
|
|
Q |
Q |
Q |
Q |
|
|
S |
S |
A |
A |
|
|
S |
S |
A |
A |
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
S |
S |
A |
A |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
S |
S |
A |
A |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
Q |
Q |
Q |
Q |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
Q |
Q |
Q |
Q |
|
A |
A |
A |
A |
|
|
A |
A |
A |
A |
|
|
Q |
A |
A |
A |
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
S |
S |
A |
A |
|
S |
S |
A |
A |
|
|
S |
S |
A |
A |
|
|
A |
A |
A |
A |
|
|
S |
S |
A |
Q |
|
|
S |
S |
A |
Q |
|
|
S |
S |
A |
Q |
|
|
A |
A |
A |
Q |
|
|
S |
Q |
Q |
Q |
|
|
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN"> |
S |
S |
A |
A |
|
S |
Q |
Q |
Q |
|
|
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HyperText Markup Language//EN"> |
S |
S |
A |
A |
标准模式与怪异模式下导致的和模型区别：
需要知道的是，盒模型差异是两种模式导致的最重要的区别之一，但是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》
