前端问题（2）-CSDN博客

本文链接：https://blog.csdn.net/echody/article/details/53914157

What’s the difference between standards mode and quirks mode?

基本概念

Quirks Mode和Standards Mode是浏览器解析HTML、CSS的两种模式。
所有浏览器都有自己的页面渲染引擎，主要包含两部分，一部分负责HTML、CSS代码解析，另一部分负责脚本代码解析，两部分合起来就可以绘制出完整页面。
IE 是最早提出 Quirks Mode 与 Standards Mode的
在 IE6 发布的时候附带了一个切换回 IE5 页面渲染方式的功能，这个功能中首次提出了 Quirks Mode。目前正在使用的浏览器这两种模式都支持，但是只有在 IE 中用户才可以自由地在两种方式之间切换，其他浏览器都是自动匹配其中一种。
Quirks Mode 和 Standards Mode 合起来就称为浏览器的文档模式 Document Mode。

产生原因

过去页面通常被写成两种版本：适用于Netscape浏览器和IE浏览器，当W3C制定Web标准时，浏览器不能马上开始使用它们，因为这样做会破坏大多数现有的网站。因此，浏览器引入了两种模式来处理符合新标准的网站。
也就是说，早期的解析方式称为Quirks mode，仿照W3C标准解析的模式我们叫做Standards mode。这两种 Mode 之间的差别就是因为工作在不同版本的渲染引擎环境下。支持两种模式的浏览器当拿到一张网页时，所做的一个前期工作就是判断采取何种方式进行解析

第三种模式

Almost Standards Mode
这种模式和 Standards Mode 几乎一致，唯一的区别就在于某些情况下 Almost Standards Mode 会采用与 Quirks 相同的方式来绘制页面。

如何查看 Document Mode

IE 中，用户可以在 developer tools 中切换模式，除了从 developer tools 中查看，还有可以从 document 对象的属性 compatMode 中获知文档模式，这个属性只有两个值 BackCompat 和 CSS1Compat，前者对应的是 Quirks Mode 后者对应 Standards Mode。在 developer tools 中切换文档模式时，页面会自动刷新，compatMode 的值也会随之改变。

浏览器如何判断文档类型

Doctype 检测
- <!DOCTYPE html>表明该页面是遵守了 HTML5 规范的，浏览器会选择 Standards Mode
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
  同样会选择 Standards Mode
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
  浏览器会选择 Almost Standards Mode
- 当 doctype 缺失的时候，浏览器会选择 Quirks Mode，这是非常不推荐的方式
x-ua-compatible 信息
在页面的标签中加入 x-ua-compatible 信息来影响文档类型的判定，一般情况下 x-ua-compatible 是优先于 doctype 的设定的。

两种模式的页面区别

盒模型（box mode）是浏览器 Quirks Mode 和 Standards Mode 的主要区别
对于Quirks Mode模式下
box width = content width + padding left + padding right + border left + border right
box height = content height + padding top + padding bottom + border top + border bottom
但是在Standards Mode下：
box width = content width
box height = content height

此外，在图片元素的垂直对齐方式，table元素中的字体，内联元素的尺寸，元素的百分比高度，元素溢出的处理等方面也存在一定区别。