前言
浏览器如何确定渲染模式
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来对待，溢出不会裁减，元素框自动调整大小，能够包含溢出内容。