HTML文档模式与盒模型

浏览数：78 / 时间：2015年06月09日

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
None	Q	Q	Q	Q
<!DOCTYPE html>	S	S	A	A
<!DOCTYPE html SYSTEM "about:legacy-compat">	?	?	?	?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">	Q	Q	Q	Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">	S	S	A	A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">	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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	A	A	A	A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">	A	A	A	A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">	S	S	A	A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	S	S	A	A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	A	A	A	A
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	S	S	A	Q
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">	S	S	A	Q
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	S	S	A	Q
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	A	A	A	Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">	S	Q	Q	Q
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN">	S	S	A	A
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HTML//EN">	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》

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

HTML文档模式与盒模型