quirks模式是什么？它和standards模式有什么区别

大家好，我是IT修真院深圳分院第01期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网 CSS任务中可能会使用到的知识点：

quirks模式是什么？它和standards模式有什么区别?

---

1.背景介绍

       什么是 Quirks Mode? 简单来说，Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式

       Quirks Mode是一种浏览器（像IE，Firefox，Opera）操作模式。 从根本上说，怪异模式（也称之为兼容模式）意味着一个相对新的浏览器故意模拟许多在旧浏览器中存在的bug，特别是在IE4和IE5中。

---

2.知识剖析

       Quirks Mode是由文档类型探查法触发。也就是大家熟知的文档类型切换。这意味着浏览器检查一个HTML文档的开始，看它是否包含一个HTML规范所要求的文档类型声明。

       Quirks Mode的目标是使旧页面显示出他们的作者想要的那样。旧页面可能利用旧浏览器已知的特性写成，或者至少是适应旧浏览器。

       Quirks Mode是什么没有权威的规范。毕竟，实质上Quirk Mode是一个故意违反CSS和HTML的规范。

---

3.常见问题

现代浏览器在Quirks Mode下，页面会发生哪些变化，怎么样去避免

1.在Quirks Mode下，为body设置一个margin是无效的。

2.默认情况下，IE有一个垂直滚动条，尽管当没有东西可以滚动的时候，它是非活动状态（迟钝状态），在Quirks Mode下，你可以通过设置body { overflow: auto;}删除它（当不需要它的时候），但是在标准模式下，你仍然需要增加html { overflow: auto;}。

3.默认的浮动图片的水平margin是3像素（而不是0）。

4.在CSS中，使用margin: 0 auto使一个块居中是无效的。；

5.字体属性不会从body或其他封闭元素继承到table中。特别是font-size。字体，颜色，行高也都有可能。

---

4.解决方案

       2000 年 1 月 5 日，微软发表声明要发布 「IE5 for Mac」。 我们先不要惊叹 IE 居然开发过 Mac 版本， 也不要惊讶 Mac 版本的 IE2 到 IE5 存在了长达十年，更不要惊呼 IE for Mac 作为 Mac 的默认浏览器存在了五六年的时间。 以当时的眼光来说，那个时候的 IE5 非常先进，它完全实现了当时最新的 html 标准「HTML 4.0」。但是随之而来的问题是， 对于一些旧的网页却不能正确的呈现（或者说，他们是被 正确渲染了）， 那些网页是按照当时占统治地位的浏览器的渲染模式来渲染的，IE5 肯定不能就这样发布。

       微软想到了一个解决方案，没错，这就是「DOCTYPE」。DOCTYPE， 或者称为 Document Type Declaration（文档类型声明，缩写 DTD）。通常情况下，DOCTYPE 位于一个 HTML 文档的最前面的位置， 位于根元素 HTML 的起始标签之前。这样一来，在浏览器解析 HTML 文档正文之前就可以确定当前文档的类型， 以决定其需要采用的渲染模式（不同的渲染 模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析）。 在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能了，尤其是新功能 不兼容旧功能时。 遇到这种问题时的一个常见做法 是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时， 就使用旧功能，这样就能不破坏原 有的程序，又提供新功能。

---

5.编码实战

       如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，这就是标准模式，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式 （怪癖模式，诡异模式，怪异模式）。总结起来，混杂模式是不符合 Web 标准的模式，准标准模式是几乎要符合标准的模式，标准模式是符合标准的模式。 我们可以使用不同的 doctype 来激活不同的模式。

下面解释每种doctype的意义

当 doctype 信息为：

“!DOCTYPE html”

时，表明该页面是遵守了 HTML5 规范的，浏览器会选择 Standards Mode，这种 doctype 是最推荐的一种，我们平时设计页面都应该加上这一个 doctype。

当 doctype 信息为：

“!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"”

时，浏览器同样会选择 Standards Mode，虽然和第一种 doctype 有一些区别，但是几乎可以认为是一样的。

当 doctype 信息为：

“!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"”

时，浏览器会选择 Almost Standards Mode，需要注意的是如果今后需要把这个页面重新改为 HTML5 规范，那么table标签中的分割图片问题可能会错乱。

当 doctype 缺失（不注明、写错）的时候，浏览器会选择 Quirks Mode，这是非常不推荐的方式，我们应该尽量避免 Quirks Mode，这对一个 web 应用是非常不利的地方。

---

6.扩展思考

       如何查看当前的 Document Mode?

一、

IE 中，用户可以在 developer tools 中切换模式，如图 1 所示，IE10 的六种文档模式都被显示在 Document Mode 菜单下，用户可以直接选择。

图 1 IE Document Mode

二、

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

通过JavaScript打印一下

弹出CSS1Compat

document对象有个属性compatMode ,它有两个值：

BackCompat 对应quirks mode

CSS1Compat 对应strict mode

---

7.参考文献

(转)Quirks模式与standards模式区别

(转)浏览器标准模式和怪异模式之间的区别是什么？

(转)怪异模式（Quirks Mode）对 HTML 页面的影响

---

8.更多讨论

详见视频：

quirks模式是什么？它和standards模式有什么区别_腾讯视频

问：为什么不推荐使用Quirks Mode？

答：因为Quirks Mode的存在是为了适应那些祖传web代码，现代web开发中，除非是有特殊的需求，如兼容低版本浏览器（IE）等才会开启怪异模式；

问：Quirks Mode中发生了什么？

答：浏览将改变自身的渲染机制，代码加载的模式将会发生不可思议的转变；

问：Quirks 和 Standards 之外还有什么模式？

答：上文已经提到了，除了Quirks 和 Standards 之外还有一种类似Standards的模式，还有一种混合模式Almost Standards Mode；

       PPT戳这里

---

感谢大家观看！

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~