简述

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

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

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

声明方面

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

盒模型方面

怪异模式：

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 --标准模式