一、背景：

由于历史的原因，不同浏览器对页面的渲染是不同的，甚至同一浏览器的不同版本也是不同的。然后这时候就出现了一个至关重要的标准规范：W3C标准。

在W3C标准出台之前，不同的浏览器在页面的渲染上没有统一的规范，这时的解析方式被称为Quirks mode（怪异模式或兼容模式）；
在W3C标准出台之后，随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准进行文档解析，不同浏览器对页面的渲染有了统一的标准，这时的解析方式被称为Strict mode，或Standards Mode（标准模式或严格模式）。
后来的浏览器虽然支持Strict mode，但众多浏览器并未放弃支持Quirks mode。一个很重要的原因就是为了之前大量在Quirks mode下开发的网页能够得到正确的显示。
因此，对于支持两种模式的浏览器当拿到一张网页时，所做的一个前期工作就是判断采取何种方式进行解析。

二、概念：

文档模式主要是告诉浏览器以哪种模式呈现，如何解析文档。这两种模式的主要区别只体现在通过 CSS 渲染的内容方面，但对JavaScript 也有一些关联影响。（注：文章后面会有体现）
文档模式最初是由IE5.5提出的，可以使用doctype 切换文档模式。在IE 初次支持文档模式切换以后，其他浏览器也跟着实现了。
一般提到标准模式，指的就是除混杂模式以外的模式。

三、如何触发不同的文档模式：

答案是：<!DOCTYPE>声明

注意：<!DOCTYPE>声明必须是 HTML 文档的第一行，位于<html>标签之前。

1. 混杂模式：

所有浏览器中都以省略文档开头的 doctype 声明作为混杂模式判断的标准。但这种约定并不合理，因为混杂模式在不同浏览器中的差异非常大。
另外，若doctype 声明不正确，也会导致HTML和XHTML文档以混杂模式呈现。

2. 标准模式：
通过下列几种文档类型声明开启：

// HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">// XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">// HTML5:
<!DOCTYPE html>

3. XHTML文档如果包含形式完整的DOCTYPE，一般以标准模式呈现。

四、两种模式的区别：

1. scrollLeft 和 scrollTop：

在混杂模式下，可以通过<body>元素检测 scrollLeft 和 scrollTop 属性的变化。
在标准模式下，所有浏览器都发生在<html>元素上。

//如：在页面滚动时垂直方向上滚动的距离：
window.addEventListener("scroll", (event) => {if (document.compatMode == "CSS1Compat") {console.log(document.documentElement.scrollTop);} else {console.log(document.body.scrollTop);}
});

2. 盒模型:

具体参见我之前总结的：CSS盒模型

3. 尺寸单位：

在标准模式下，所有尺寸都必须包含单位，若不含单位的话，会被忽略。
在混杂模式下，可以把 style.width设置为"20"，相当于"20px"。

五、如何检测两种模式：

浏览器提供了以标准、混杂模式渲染页面的能力之后，检测页面渲染模式成为一个必要的需求。该功能最初是由IE6提出的，目前已被各大浏览器所支持。HTML5 最终也把 compatMode 属性的实现标准化了。

基于document.compatMode属性，判断浏览器当前处于什么渲染模式：

标准模式下，值为"CSS1Compat"
混杂模式下，值为"BackCompat"

//判断浏览器当前处于什么渲染模式
if (document.compatMode == "CSS1Compat"){console.log("Standards mode");
} else {console.log("Quirks mode");
}

注：该属性 IE浏览器最低兼容到 IE6

文档模式：标准模式、混杂模式相关推荐

文档(Documents), 字段(Fields), 及模式设计(Schema Design)
1. 文档(Documents), 字段(Fields), 及模式设计(Schema Design) 1.1 概览 1.1.1 Solr的Schema文件 Solr在schema文件中存储它需要知道的 ...
网络嗅探混杂模式与非混杂模式的区别
1.混杂模式与非混杂模式的区别: 这两种方式区别很大.一般来说,非混杂模式的嗅探器中,主机仅嗅探那些跟它直接有关的通信,如发向它的,从它发出的,或经它路由的等都会被嗅探器捕捉.而在混杂模式中则嗅探传输 ...
linux端口混杂模式,linux端口混杂模式简介~
设置端口混杂模式:ifconfig eth0 promisc 设置混杂ifconfig eth0 -promisc 取消混杂网卡工作模式有4种,分别是: 广播(Broadcast)模式多播(Mul ...
linux端口混杂模式,linux 端口混杂模式简介~
linux 端口混杂模式简介~ 设置端口混杂模式: ifconfig eth0 promisc 设置混杂 ifconfig eth0 -promisc 取消混杂网卡工作模式有 4 种, 分别是: 广 ...
论通用病历文档格式标准
论通用病历文档格式标准南京都昌信息科技有限公司袁永福 2016-11-21 本文首发于 http://www.hit180.com/23732.html 作者简介: 袁永福,男,南京东南大学毕业, ...
Go语言国际电子表格文档格式标准实践
在 Gopher Meetup 北京站上,阿里巴巴高级开发工程师.前百度 Go 语言编程委员会成员续日进行了主题为<Go语言国际电子表格文档格式标准实践>的演讲. Excelize 是 G ...
项目管理文档_免费直播 | 项目管理模式“武装”质量管理体系
PPM优课第18期 U318 传统项目管理和敏捷项目管理是项目管理的两大模式. 传统项目管理是瀑布式,由文件搭建开始,逐步完善的过程,要求在项目建设时,需求足够明确.文档足够规范,文件升版过程中需求 ...
服务器共享文档密码设置,服务器共享模式怎么设置密码
服务器共享模式怎么设置密码内容精选换一换本节操作以"Windows Server 2012 R2 数据中心版 64位"操作系统为例,介绍如何通过Microsoft Remot ...
Word2013文档打字如何设置插入模式与改写模式
在编辑Word文档时,经常出现在一句话中间打字的时候把前面的字覆盖是因为切换成了改写模式. Word 文档中,改写和插入切换的快捷键是"insert"键.这时按一下"in ...
【Ansible 文档】【译文】模式
Patterns 模式 Ansible中的模式是指我们如何决定那些机器执行管理操作.这里意味着与那些主机通信,但是对于playbook,它是指哪些主机应用特定的配置或执行特定程序. 我们将重温一下In ...

文档模式：标准模式、混杂模式

一、背景：

二、概念：

三、如何触发不同的文档模式：

四、两种模式的区别：

五、如何检测两种模式：

文档模式：标准模式、混杂模式相关推荐

最新文章

热门文章

文档模式：标准模式、混杂模式

一、 背景：

二、概念：

三、如何触发不同的文档模式：

四、两种模式的区别：

五、如何检测两种模式：

文档模式：标准模式、混杂模式相关推荐

最新文章

热门文章

一、背景：