前言
在实现html和css标准化之前，各个浏览器对html和css的解析各有不同，甚至是同一个浏览器的不同版本渲染方式也不同（比如：IE6&IE7）。在W3C指定标准之后，浏览器既要按照标准去实现HTML和CSS的支持，又要保证能够兼容以前的非标准的旧网页，于是就有了现在所说的标准模式和兼容模式。
浏览器如何确定渲染模式
在编写HTML文档时，一般都会在文档的开头（html标签之前）声明文档类型：DOCTYPE。当浏览器在解析html文档时，若遇到正确的文档声明，则启用标准模式，按照标准来解析和渲染文档。而对于旧的html文档或没有DOCTYPE声明的文档，则按照怪异模式来解析文档。浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。
html5的文档声明方式：<!DOCTYPE HTML>
如何判断这两种模式
1、在 Firefox中，请从右键菜单选择查看页面信息，然后查看渲染模式。
2、在 Internet Explorer中，请按下F12，然后查看文档模式。
3、通过代码判断：
window.top.document.compatMode
如果语句返回为：backCompat表示怪异模式，如果为CSS1Compat则表示为标准模式。
标准模式（strict mode）
标准模式（严格模式），浏览器按W3C标准解析执行代码，
怪异模式（quirks mode）
怪异模式（混杂模式），使用浏览器自己的方式解析执行代码
标准模式和怪异模式的区别
1、width不同
在标准模式中：width是内容（content）宽度，元素真正的宽度是外边距、内边距、边框宽度的和，即元素宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right。
在怪异模式中：width则是元素的实际宽度，width = border-left-width + padding-left+ 内容(content)宽度 + padding-right + border-right-width。
2、内联元素的尺寸
标准模式中，给span等行内元素设置width和height都不会生效，而在怪异模式下，却会生效。
3、可设置百分比的高度
在标准模式下，一个元素的高度由其包含的内容content决定，如果父元素没有设置高度，子元素设置一个百分比高度是无效的。
4、用margin : 0 auto设置水平居中
在标准模式下可以使元素水平居中，但是在怪异模式下，无效，可以用text-align : center;来实现居中。
5、怪异模式下设置图片的padding会失效
6、怪异模式下table中的字体属性不能继承上层的设置
7、元素溢出的处理
标准模式下，overflow默认去visible，在怪异模式下，溢出会被当做扩展box来对待，溢出不会裁减，元素框自动调整大小，能够包含溢出内容。