一、 背景:
由于历史的原因,不同浏览器对页面的渲染是不同的,甚至同一浏览器的不同版本也是不同的。然后这时候就出现了一个至关重要的标准规范:W3C标准。
- 在W3C标准出台之前,不同的浏览器在页面的渲染上没有统一的规范,这时的解析方式被称为Quirks mode(怪异模式或兼容模式);
- 在W3C标准出台之后,随着W3C的标准越来越重要,众多的浏览器开始依照W3C标准进行文档解析,不同浏览器对页面的渲染有了统一的标准,这时的解析方式被称为Strict mode,或Standards Mode(标准模式或严格模式)。
- 后来的浏览器虽然支持Strict mode,但众多浏览器并未放弃支持Quirks mode。一个很重要的原因就是为了之前大量在Quirks mode下开发的网页能够得到正确的显示。
因此,对于支持两种模式的浏览器 当拿到一张网页时,所做的一个前期工作就是判断采取何种方式进行解析。
二、概念:
-
文档模式主要是告诉浏览器以哪种模式呈现,如何解析文档。这两种模式的主要区别只体现在通过 CSS 渲染的内容方面,但对JavaScript 也有一些关联影响。(注:文章后面会有体现)
-
文档模式最初是由IE5.5提出的,可以使用doctype 切换文档模式。在IE 初次支持文档模式切换以后,其他浏览器也跟着实现了。
-
一般提到标准模式,指的就是除混杂模式以外的模式。
三、如何触发不同的文档模式:
答案是:<!DOCTYPE>
声明
注意:<!DOCTYPE>
声明必须是 HTML 文档的第一行,位于<html>
标签之前。
1. 混杂模式:
- 所有浏览器中都以省略文档开头的 doctype 声明作为混杂模式判断的标准。但这种约定并不合理,因为混杂模式在不同浏览器中的差异非常大。
- 另外,若doctype 声明 不正确,也会导致HTML和XHTML文档以混杂模式呈现。
2. 标准模式:
通过下列几种文档类型声明开启:
// HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
// XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
// HTML5:
<!DOCTYPE html>
3. XHTML文档如果包含形式完整的DOCTYPE,一般以标准模式呈现。
四、两种模式的区别:
1. scrollLeft 和 scrollTop:
- 在混杂模式下,可以通过
<body>
元素检测 scrollLeft 和 scrollTop 属性的变化。 - 在标准模式下,所有浏览器都发生在
<html>
元素上。
//如:在页面滚动时垂直方向上滚动的距离:
window.addEventListener("scroll", (event) => {
if (document.compatMode == "CSS1Compat") {
console.log(document.documentElement.scrollTop);
} else {
console.log(document.body.scrollTop);
}
});
2. 盒模型:
具体参见我之前总结的:CSS盒模型
3. 尺寸单位:
- 在标准模式下,所有尺寸都必须包含单位,若不含单位的话,会被忽略。
- 在混杂模式下,可以把 style.width设置为"20",相当于"20px"。
五、如何检测两种模式:
浏览器提供了以标准、混杂模式渲染页面的能力之后,检测页面渲染模式成为一个必要的需求。该功能最初是由IE6提出的,目前已被各大浏览器所支持。HTML5 最终也把 compatMode 属性的实现标准化了。
基于document.compatMode属性,判断浏览器当前处于什么渲染模式:
- 标准模式下,值为"CSS1Compat"
- 混杂模式下,值为"BackCompat"
//判断浏览器当前处于什么渲染模式
if (document.compatMode == "CSS1Compat"){
console.log("Standards mode");
} else {
console.log("Quirks mode");
}
注:该属性 IE浏览器 最低兼容到 IE6