在很久以前的网络上,页面通常有两种版本:为网景(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/