关于渲染模式：
在多年以前（IE6诞生以前），各浏览器都处于各自比较封闭的发展中（基本没有兼容性可谈）。
随着WEB的发展，兼容性问题的解决越来越显得迫切，随即，各浏览器厂商发布了按照标准模式（遵循各厂商制定的统一标准）工作的浏览器，比如IE6就是其中之一。
存在问题：以前建设的网站并不支持标准模式
解决：各浏览器在加入标准模式的同时也保留了混杂模式
混杂模式：即以前那种未按照统一标准工作的模式，也叫怪异模式
近似标准模式：在一种模式中同时融入标准模式和部分混杂模式的特性，也称为接近标准模式、准标准模式、最有限混杂模式
标准模式：近似标准模式、标准模式、超级标准模式三者也共同被称作标准模式
因此，浏览器的模式可以分为两类：标准模式和混杂模式，其中，标准模式又可更严格的分为近似标准模式、标准模式、超级标准模式。
image.png
需要注意的是，不同厂商浏览器的标准模式也是有细微差别的（这是标准实现程度的问题）。此外，同品牌不同版本浏览器的标准模式也是有差别的，比如IE6&IE7时代的标准模式在现在看来或许已经不那么标准了（IE8和IE9都在不断的提高标准的实现程度，因此差距越来越大是必然的），但尽管如此它们依然叫做标准模式，毕竟它们在那个特定时代那个特定版本中确实是按照尽可能遵循标准的方式工作的。
什么是DOCTYPE：
DOCTYPE，或者称为 Document Type Declaration（文档类型声明，缩写 DTD）。通常情况下，DOCTYPE 位于一个 HTML 文档的最前面的位置，位于根元素 HTML 的起始标签之前。这样一来，在浏览器解析 HTML 文档正文之前就可以确定当前文档的类型，以决定其需要采用的渲染模式（不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析）。
DOCTYPE与各种模式的关系：
混杂模式：不写DOCTYPE
近似标准模式：HTML 4.01 XHTML 1.0 loose frameset transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
标准模式：HTML 4.01 XHTML 1.0 Strict
<!DOCTYPE html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
我们可以看到，过渡型或框架型HTML声明与过渡型或框架型XHTML声明均可使浏览器进入近似标准模式，同时，html5的DOCTYPE声明和严格型HTML声明以及严格型XHTML声明则会使浏览器进入标准模式。
更详细说明
三种模式下的表现差异：
混杂模式是不可取的，因为其没有兼容性可言。在IE（IE6~IE9）中，混杂模式即使用IE5.5内核来解析并渲染页面。
近似标准模式是在尽可能遵循标准的基础上兼容部分非标准代码，比如一些已经弃用的标签等。
标准模式则是对统一标准实现最好的模式，它要求标签必须闭合（唯一不需要闭合的就是DOCTYPE标签），不能使用已经废弃的标签等等。目前，使用最多的DOCTYPE声明为过渡型HTML或XHTML，因为它能最大话的兼容一些老代码。不过，技术领先的公司（比如google、facebook、twitter等都如此）都已经使用了html5的DOCTYPE声明，即<!DOCTYPE html>，它所触发的模式与严格型HTML或严格型XHTML所触发的模式完全相同，但好处是节省代码且向前兼容（HTML5时代）。
其它激活混杂模式的情况：
当我们不写DOCTYPE声明时，所有浏览器都会进入混杂模式。
也存在因其他情况而进入混杂模式的时候，这些情况都是我们应该避免的，最常见的就是在DOCTYPE声明前面出现了这些内容：普通文本、HTML 标签、HTML 注释、XML 声明、IE条件注释。
对于普通文本和HTML标签，各浏览器均进入了混杂模式，这个很好理解，都看到疑似的HTML文档正文了，浏览器就不需要再往下追查DOCTYPE在哪里了。
对于HTML注释和XML声明，它们和上面的普通文本和HTML标签有些差别，它们不会在页面中展示出来，即不可视。这时，有的浏览器则显得十分“智能”，非IE浏览器均会忽略它们的存在，DOCTYPE 被正确解析。但是在IE6中，DOCTYPE之前的 XML 声明会导致页面进入混杂模式，而如果DOCTYPE之前出现了HTML注释，则所有IE都会进入混杂模式。有的作者很聪明，他既在DOCTYPE之前加入了他需要的内容，却又没有使IE由于这些内容而进入混杂模式。他可能会这么写：
<![if !IE]><!-- some comments --><![endif]><![if false]><!-- some comments --><![endif]>
上面这些IE条件注释在非IE浏览器中，可能完全被忽略，可能被解释为普通HTML注释。但是在IE中它们全部消失了，因为这就是IE条件注释的作用。所以这也是目前比较合适的在DOCTYPE之前写点什么又保证所有浏览器均为标准模式的做法，但我们仍然不推荐在DOCTYPE之前加入任何非空白内容。
用JS判断浏览器当前的模式：
document.write(document.compatMode == "CSS1Compat" ? "当前处于标准模式" : "当前处于混杂模式");
image.png
标准模式（严格）下和混杂模式（传统）下的页面渲染区别
（1 ）盒模型：
在混杂模式下，盒模型为IE盒模型，border-box
image
而在W3C标准的盒模型中为
image
（2）图片元素的垂直对齐方式：
对于inline元素和table-cell元素，标准模式下vertical-align属性默认取值为baseline
在怪异模式下table单元格中的图片的vertical-align属性默认取值为bottom，因此在图片底部会有及像素的空间。
（3）<table>元素中的字体：
CSS中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素中继承得到，特别是font-size属性。
（4）内联元素的尺寸：
标准模式下，non-replaced inline元素无法自定义大小，怪异模式下，定义这些元素的width，height属性可以影响这些元素显示的尺寸。
（5）元素的百分比高度：
a：CSS中对于元素的百分比高度规定如下：百分比为元素包含块的高度，不可为负值，如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须在父元素有高度声明的情况下使用。
b：当一个元素使用百分比高度时，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被正确应用。
（6）元素溢出的处理：
标准模式下，overflow取默认值visible，在怪异模式下，该溢出会被当做扩展box来对待，即元素的大小由其内容决定，溢出不会裁减，元素框自动调整，包含溢出内容。
作者：阿r阿r
链接：https://www.jianshu.com/p/75b52764553b
随时随地看视频
