【前端面试的坑】浏览器的渲染模式

简述

在很久以前的网络上，页面通常有两种版本：为网景（Netscape）的 Navigator 准备的版本，以及为微软（Microsoft）的 Internet Explorer 准备的版本。当 W3C 创立网络标准后，为了不破坏当时既有的网站，浏览器不能直接弃用这些标准。因此，浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。

目前浏览器的排版引擎有三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。

• 标准模式：浏览器引入w3c的标准，按照w3c的标准进行界面渲染。
• 怪异模式：浏览器采用自身标准（各个浏览器不同）进行界面渲染。
• 接近标准模式：只有少数的怪异行为被实现。

怪癖模式和标准模式的区别

1. 声明方面

   当页面没有！doctype声明或者！doctype声明中没有HTML4以上（包含HTML4）的DTD声明，则页面以quirks mode渲染，其他情况则以sdandars mode渲染。

2. 盒模型方面

   怪异模式：
   

   css怪异模式下

   盒子模型的 width = content + padding + border

   只要content+padding+border的宽度之和小于width，那么无论怎么变动padding和border，盒子的宽度都是不发生变化的，只是会缩小content的宽度，也就是说在怪异模式下，content的宽度是可变的，当content+padding+border的宽度大于width的宽度后，盒子会变大，变大后的差值就是content+padding+border-width。

   获取页面宽高值的 JS 代码

   cWidth=document.body.scrollWidth;
   cHeight=document.body.scrollHeight;
   

   标准模式
   
   在标准模式下

   盒子模型的 width = content

   盒子模型的总宽度等于width+padding+border+margin，这四项有一项发生变化，盒子的宽度随之会发生变化。

   获取页面宽高值的 JS 代码

   cWidth=document.documentElement.scrollWidth;
   cHeight=document.documentElement.scrollHeight;
   

js 检测渲染模式的方法

alert(document.compatMode );

输出有两个可能值：
BackCompat --怪癖模式
CSS1Compat --标准模式