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

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》

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