严格模式、混杂模式与怪异模式

Doctype作用？严格模式、混杂模式和怪异模式如何区分？它们有何意义？

由于历史的原因，不同浏览器对页面的渲染是不同的，甚至同一浏览器的不同版本也是不同的。在W3C标准出台之前，不同的浏览器在页面的渲染上没有同一的规范，产生了差异，即Quirks mode(怪异模式或兼容模式)；当W3C标准出台之后，不同浏览器对页面的渲染有了统一的标准,即Strict mode（标准模式或严格模式）；这就是两者之间的区别。

W3C标准推出前，旧的页面都是根据旧的渲染方式对页面进行渲染的，因此在W3C标准推出后为了保证旧页面的正常显示，保持浏览器的兼容性，这样浏览器上就产生了能够兼容W3C标准渲染的严格模式和保证旧页面显示的怪异模式的标准兼容模式。

如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

1、doctype的作用：

声明位于文档 的最前面，告知浏览器的解析器，用什么文档类型、规范来解析这个文档。

注意：
1).规范是指W3C发布的文档类型定义(DTD)中的规则。
2).三种DTD类型：严格、过渡和基于框架的HTML版本。

2、严格模式、混杂模式和怪异模式的区分

1）严格模式：严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
2）混杂模式：混杂模式的页面以宽松的向后兼容的方式显示；模拟老的浏览器的行为以防止站点无法工作。
3）怪异模式：怪异模式则是使用浏览器自己的方式来解析执行代码。

3、它们的意义

Dcotype不存在或者不正确会导致文档以混杂模式呈现。

js判断是哪种模式

1.作用：表明当前文档的渲染模式是混杂模式还是"标准模式"

2.语法：

mode = document.compatMode

值：

如果文档处于“混杂模式”，则该属性值为"BackCompat"
如果文档处于“标准模式”或者“准标准模式(almost standards mode)”，则该属性为"CSS1Compat"

例子1：

if (document.compatMode == "BackCompat") {
  // 渲染模式为混杂模式
}else if(document.compatMode == "CSS1Compat"){
    //渲染模式为标准模式
} 

实际应用

<script>
    function client() {
        if(window.innerWidth != null) // ie9 + 最新浏览器
        {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            }
        }else if(document.compatMode === "CSS1Compat") // 标准浏览器
            {
                return {
                    width: document.documentElement.clientWidth,
                    height: document.documentElement.clientHeight
                }
            }
            return { // 怪异浏览器
                width: document.body.clientWidth,
                height: document.body.clientHeight
        }
    }
    document.write(client().width); 
</script>

原文：https://blog.csdn.net/muzidigbig/article/details/88655127