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》
HTML文档模式与盒模型的更多相关文章
- 阅读MDN文档之基本盒模型(三)
Box properties Margin collapsing Adjacent siblings(相邻兄弟) Parent and first/last child Empty blocks Ac ...
- DOCTYPE是什么鬼？文档模式又是什么鬼？
!DOCTYPE !DOCTYPE是什么: 在所有 HTML 文档中规定 DOCTYPE 是非常重要的,这样浏览器就能了解预期的文档类型, 告诉浏览器要通过哪一种规范(文档类型定义 DTD)解析文档( ...
- 关于HTML文档的文档模式
HTML文档的文档模式包括混杂模式和标准模式,这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行. 如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开 ...
- 关于文档模式、DCOTYPE声明及严格模式
1.文档模式 文档模式的概念是由IE5.5引入,通过使用文档类型(DOCTYPE)切换实现的.不同的文档模式主要影响CSS内容的呈现,尤其是浏览器对盒模型的解析,但在某些情况下也会影响到JavaScr ...
- 浅谈HTML文档模式
不知道爱多想的你有没有在编写HTML代码时思考过 <!DOCTYPE html> 或是这一长串看都看不懂的 <!DOCTYPE HTML PUBLIC "-//W3C//D ...
- 关于html中的doctype的重要性的认知以及IE的浏览器模式与文档模式
浏览器模式”用于切换IE针对该网页的默认文档模式.对不同版本浏览器的条件备注解析.发送给网站服务器的用户代理(User-Agent)字符串的值.网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版 ...
- 《javascript高级程序设计》笔记：文档模式
文档模式是用于指定浏览器使用什么样的标准来正确的显示网页,各个标准的解析存在着差异 文档类型的分类 文档模式大致分为三种类型: 混杂模式(quirks mode) 标准模式(standards mod ...
- 360浏览器遇到文档模式是IE7的解决办法
这段时间遇到了360浏览器在加载java项目时,默认的文档模式是IE7,使得网页加载下拉框出现问题. 解决的方法是: 在显示的jsp页面加上 <meta http-equiv="X-U ...
- <meta>指定浏览器模式(browser mode)或文档模式(document mode)无效
这是前两天解决的一个故障,准确的说它不是一个SharePoint的问题,而是IE8浏览器或者说是HTML代码的问题,但我感觉还是挺有意思的,所以贴上来分享一下. 基础知识 简单的讲,就是IE浏览器中有 ...
随机推荐
- Nginx平台构架 分类： Nginx 2015-07-13 10:55 205人阅读 评论(0) 收藏
深入理解Nginx模块发开与架构解析读书笔记. nginx在启动后,在unix系统中会以daemon的方式(可以手动关闭 nginx.conf daemon off)在后台运行,后台进程包含一个mas ...
- flex利用webservice上传照片
WebService端代码 /// <summary> /// 上传文件到远程server /// </summary> /// <param name="fi ...
- linux 0.11 源码学习+ IO模型
http://www.cnblogs.com/Fredric-2013/category/696688.html
- careercup-链表 2.3
2.3 实现一个算法,删除单向链表中间的某个结点,假设你只能访问该结点.(即你不知道头结点) 这个问题的关键是你只有一个指向要删除结点的指针,如果直接删除它,这条链表就断了. 但你又没办法得到该结点之 ...
- QuaZip实现多文件打包
项目需求: 在Goldenfarm客户端中当用户选择了本地场景文件,并进行本地场景文件分析后会产生分析结果,分析结果主要包括:贴图纹理.可渲染层等,其中贴图纹理指出了在场景文件中使用到的贴图或其它文件 ...
- Mac上pod install一直停住的解决办法
pod install一直停住的解决办法 在/Users/XXX/.cocoapods/repos下 git clone https://github.com/CocoaPods/Specs.git ...
- 也谈android开发图像压缩
long long ago,给学院做的一个通讯录App需要有一个上传图像的功能,冥思苦想,绞尽脑汁后来还是没解决(学生时代的事),于是就直接上传原图了,一张图片2M到3M,这样我的应用发布之后,那绝对 ...
- android开发布局优化之ViewStub
使用ViewStub可以延迟加载一个布局文件,提高显示速率.刚开始接触到,记录下来. 关于viewstub的使用,我们可以在不同的布局中使用,比如可以根据设备的大小动态决定显示哪个界面. viewst ...
- linux根下目录详解及分区建议
/ 根目录 分区大小一定要充足,一般不小于5GB/bin,/usr/bin 普通用户使用命令 建议和/放一起/sbin,/usr/sbin 管理员使用命令/bin,/sbin 操作系统自身 ...
- 程序员带你学习安卓开发，十天快速入-对比C#学习java语法
关注今日头条-做全栈攻城狮,学代码也要读书,爱全栈,更爱生活.提供程序员技术及生活指导干货. 如果你真想学习,请评论学过的每篇文章,记录学习的痕迹. 请把所有教程文章中所提及的代码,最少敲写三遍,达到 ...