一、 背景：
由于历史的原因，不同浏览器对页面的渲染是不同的，甚至同一浏览器的不同版本也是不同的。然后这时候就出现了一个至关重要的标准规范：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
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！