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文档模式与盒模型的更多相关文章

  1. 阅读MDN文档之基本盒模型(三)

    Box properties Margin collapsing Adjacent siblings(相邻兄弟) Parent and first/last child Empty blocks Ac ...

  2. DOCTYPE是什么鬼?文档模式又是什么鬼?

    !DOCTYPE !DOCTYPE是什么: 在所有 HTML 文档中规定 DOCTYPE 是非常重要的,这样浏览器就能了解预期的文档类型, 告诉浏览器要通过哪一种规范(文档类型定义 DTD)解析文档( ...

  3. 关于HTML文档的文档模式

    HTML文档的文档模式包括混杂模式和标准模式,这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行. 如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开 ...

  4. 关于文档模式、DCOTYPE声明及严格模式

    1.文档模式 文档模式的概念是由IE5.5引入,通过使用文档类型(DOCTYPE)切换实现的.不同的文档模式主要影响CSS内容的呈现,尤其是浏览器对盒模型的解析,但在某些情况下也会影响到JavaScr ...

  5. 浅谈HTML文档模式

    不知道爱多想的你有没有在编写HTML代码时思考过 <!DOCTYPE html> 或是这一长串看都看不懂的 <!DOCTYPE HTML PUBLIC "-//W3C//D ...

  6. 关于html中的doctype的重要性的认知以及IE的浏览器模式与文档模式

    浏览器模式”用于切换IE针对该网页的默认文档模式.对不同版本浏览器的条件备注解析.发送给网站服务器的用户代理(User-Agent)字符串的值.网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版 ...

  7. 《javascript高级程序设计》笔记:文档模式

    文档模式是用于指定浏览器使用什么样的标准来正确的显示网页,各个标准的解析存在着差异 文档类型的分类 文档模式大致分为三种类型: 混杂模式(quirks mode) 标准模式(standards mod ...

  8. 360浏览器遇到文档模式是IE7的解决办法

    这段时间遇到了360浏览器在加载java项目时,默认的文档模式是IE7,使得网页加载下拉框出现问题. 解决的方法是: 在显示的jsp页面加上 <meta http-equiv="X-U ...

  9. <meta>指定浏览器模式(browser mode)或文档模式(document mode)无效

    这是前两天解决的一个故障,准确的说它不是一个SharePoint的问题,而是IE8浏览器或者说是HTML代码的问题,但我感觉还是挺有意思的,所以贴上来分享一下. 基础知识 简单的讲,就是IE浏览器中有 ...

随机推荐

  1. MVC Controller return 格式

    所看到的Action都是return View();我们可以看作这个返回值用于解析一个aspx文件.而它的返回类型是ActionResult如 public ActionResult Index()  ...

  2. Android-用webservice连接sqlserver数据库

    以前做的东西,只要用数据库的都是在项目里自己重新做一份数据.但是这种方法是很不可取的,首先,手机内存不会很大,把数据表建在项目里无疑又增大了程序.这样一来手机的运行速度可想而知.其次,数据大的时候还是 ...

  3. 【转】SVN:Android Studio设置忽略文件

    Android Studio创建的Android项目一般需要忽略 参考: http://blog.csdn.net/qq_22780533/article/details/51965007 1..id ...

  4. TREEVIEW拖拽对应修改目录

    附件:http://files.cnblogs.com/xe2011/TreeView_Drag_Directory%E6%93%8D%E4%BD%9C.rar     TREEVIEW拖拽对应修改目 ...

  5. [Webpack 2] Validate your Webpack config with webpack-validator

    It’s quite common to make a mistake while developing your webpack configuration. A simple typo can c ...

  6. [Redux] Fetching Data on Route Change

    We will learn how to fire up an async request when the route changes. A mock server data: /** /api/i ...

  7. NSURLSessionDownloadTask 断点下载

    #import "ViewController.h" #import "ASIHTTPRequest.h" #import <AFNetworking/A ...

  8. 通过源码看android系列之multidex库

    我们在开发项目时,喜欢引入好多的第三方包,大大的方便了我们的开发,但同时,因为android方法总数的限制,不能超过65k,然而呢,随着我们的开发,65k最终还是会超过,所以,google就给出了这个 ...

  9. SQL Server 2005恢复数据库详细图文教程

    不少需要用到sql2005的程序,有很多新手还是会操作,这里写个详细的图文教程送个菜鸟们,高手请飘过.适用于独立主机的朋友使用,如果你还没安装,请按照这个教程来安装 SQL Server 2005图文 ...

  10. SQL带参数拼接

    List<SqlParameter> paras = new List<SqlParameter>(); string wherSql = PreWhereSQL + GetQ ...