【前端】：浏览器渲染模式
在很久以前的网络上，页面通常有两种版本：为网景（Netscape）的 Navigator准备的版本以及为微软（Microsoft）的 Internet Explorer准备的版本。当 W3C 创立网络标准后，为了不破坏当时既有的网站，浏览器不能直接弃用这些标准。因此，浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。
目前浏览器的排版引擎有三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。在怪异模式下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。标准模式下，行为即由 HTML 与 CSS 的规范描述的行为。在接近标准模式下，只有少数的怪异行为被实现。
图1-1：浏览器渲染引擎族谱
2. 浏览器如何决定用哪个模式 ？
浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。
<!DOCTYPE html><!DOCTYPE html>，是所有可用的 DOCTYPE 之中最简单的，而且是HTML5 所推荐的。HTML的早期变种也属于推荐标准，不过今日的浏览器都会对这个 DOCTYPE 使用标准模式，就算是已过时的 Internet Explorer 6 也一样。如果你使用其他的 DOCTYPE，你可能会冒着触发接近标准模式或者怪异模式的风险。
!!! 了解即可，用标准模式就对了 !!!
3. 我要如何知道目前是哪个模式 ？
3.1. document.compatMode
document.compatMode 可以表明当前文档的渲染模式是混杂模式还是"标准模式".
API：
mode = document.compatMode;
//
// mode is an enumerated value that can be:
// "BackCompat" if the document is in quirks mode.
// "CSS1Compat" if the document is in no-quirks (also known as "standards") mode
// or limited-quirks (also known as "almost standards") mode.
//浏览器兼容性：
示例：
4. 标准模式与怪异模式的主要区别？
4.1. 盒模型
盒模型（box mode）是浏览器 Quirks Mode 和 Standards Mode 的主要区别。
示例：
div.a{
width:200px;
height:200px;
border:50px solid red;
}
<div class="a"></div>
4.2. 图片元素的垂直对齐方式
CSS 中 vertical-align 属性用于设置或检索对象内容垂直对齐方式，该属性定义行内元素的 base line 相对于该元素所在行的 base line 的垂直对齐。
对于 inline 元素和 table-cell 元素，在 IE Standards Mode 下 vertical-align 属性默认取值为 baseline。当 inline 元素的内容只有图片时，如 table 的单元格 table-cell，在 IE 10 Quirks Mode 下，table 单元格中的图片的 vertical align 属性默认为 bottom。
td.a {
border-style:solid;
border-color:blue;
}
img.c {
width:200px;
height:200px;
border-style:solid;
border-color:orange;
}
<table>
<td class="a">
<img class="c" src="pic.jpg"/>
</td>
</table>
4.3. <table>元素中的字体
CSS 中，描述 font 的属性有 font-family，font-size，font-style，font-weight，分别表示了 font 的族系、大小、风格以及粗细。在 CSS 标准中，上述属性都是可以继承的。而在 IE Quirks Mode 下，对于 table 元素，字体的某些属性将不会从 body 或其他封闭元素继承到 table 中，特别是 font-size 属性。
4.4. 内联元素的尺寸
CSS 中常见的元素有两类，分别是 block（块级）元素及 inline（内联）元素。根据 CSS 标准，对于 inline 元素，又可以分为 replaced 和 non-replaced 两类。在 IE Standards Mode 下，non-replaced inline 元素无法自定义大小，而在 IE Quirks Mode 下，定义这些元素的 width 和 height 属性，能够影响该元素显示的大小尺寸。
div.a {
width:200px;
height:200px;
background-color:orange;
}
span.b {
height:100px;
width:100px;
background-color:blue;
}
<div class="a">
<span class="b">This is span!</span>
</div>
4.5. 元素的百分比高度
CSS 中对于元素的百分比高度规定如下，百分比为元素包含块的高度，不可为负值。如果包含块的高度没有显式给出，该值等同于“auto”（即取决于内容的高度）。所以百分比的高度必须在父元素有声明高度时使用。当一个元素使用百分比高度时，在 IE Standards Mode 下，高度取决于内容的变化，而在 IE5 Quirks Mode 下，百分比高度则被正确应用。
table.a {
height:400px;
background-color:pink;
}
div.b {
background-color:orange;
width:300px;
height:90%;
display:block;
}
div.c {
width:200px;
height:200px;
background-color:blue;
}
<table class="a">
<td>
<div class="b">
<div class="c">
</div>
</div>
</td>
</table>
4.6. 元素溢出的处理
CSS 中 overflow 属性定义了一个元素的内容不适合指定的尺寸时，溢出元素内容的处理方式。默认值为 visible，即显示溢出。在 IE Standard Mode 下，overflow 取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展 box 来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。
div.a {
width:300px;
height:300px;
background-color:blue;
}
div.b {
width:200px;
height:400px;
background-color:orange;
}
<div class="a">
<div class="b"></div>
</div>
参考：
Quirks Mode and Standards Mode https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode 怪异模式（Quirks Mode）对 HTML 页面的影响 https://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/ document.compatMode https://developer.mozilla.org/zh-CN/docs/Web/API/Document/compatMode Activating Browser Modes with Doctype https://hsivonen.fi/doctype/ Quirks Mode Living Standard — Last Updated 19 August 2019 https://quirks.spec.whatwg.org/ Mozilla Quirks Mode Behavior https://developer.mozilla.org/en-US/docs/Mozilla/Mozilla_quirks_mode_behavior Gecko's "Almost Standards" Mode https://developer.mozilla.org/en-US/docs/Mozilla/Gecko_Almost_Standards_Mode Understanding the need for document compatibility modes https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/jj676916(v=vs.85) IE 官方虚拟机： https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/