⼀、背景：
由于历史的原因，不同浏览器对页⾯的渲染是不同的，甚⾄同⼀浏览器的不同版本也是不同的。然后这时候就出现了⼀个⾄关重要的标准规范：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"
"/TR/html4/strict.dtd">
// XHTML 1.0 Strict:
周渝斐<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"/TR/xhtml1/DTD/xhtml1-strict.dtd">
// HTML5:
<!DOCTYPE html>
跨文化交际英语论文
3. XHTML⽂档如果包含形式完整的DOCTYPE，⼀般以标准模式呈现。
四、两种模式的区别：
超级解霸怎么用1. scrollLeft 和 scrollTop：
在混杂模式下，可以通过<body>元素检测 scrollLeft 和 scrollTop 属性的变化。
w3c在标准模式下，所有浏览器都发⽣在<html>元素上。
//如：在页⾯滚动时垂直⽅向上滚动的距离：
window.addEventListener("scroll",(event)=>{
枝吻纽虫
if(documentpatMode =="CSS1Compat"){
console.log(document.documentElement.scrollTop);
}else{
console.log(document.body.scrollTop);
}
});
2. 盒模型:
具体参见我之前总结的：
3. 尺⼨单位：
东丰二中在标准模式下，所有尺⼨都必须包含单位，若不含单位的话，会被忽略。
在混杂模式下，可以把 style.width设置为"20"，相当于"20px"。
五、如何检测两种模式：
浏览器提供了以标准、混杂模式渲染页⾯的能⼒之后，检测页⾯渲染模式成为⼀个必要的需求。该功能最初是由IE6提出的，⽬前已被各⼤浏览器所⽀持。HTML5 最终也把 compatMode 属性的实现标准化了。
基于documentpatMode属性，判断浏览器当前处于什么渲染模式：
标准模式下，值为"CSS1Compat"
混杂模式下，值为"BackCompat"
//判断浏览器当前处于什么渲染模式
if(documentpatMode =="CSS1Compat"){
console.log("Standards mode");
}else{
console.log("Quirks mode");
}
注：该属性 IE浏览器 最低兼容到 IE6
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议