Standards模式
从IE6开始，引入了 Standards模式（标准模式），该模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差
兼容问题
IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 的 Standards模式 显示这些页面，就不正常
解决问题
为了能够正常显示之前的页面，又能支持 Standards模式 的渲染机制，提出 Quirks Mode
Quirks模式
浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式
Quirks Mode是一种浏览器（像IE，Firefox，Opera）操作模式。 从根本上说，怪异模式（也称之为兼容模式）意味着一个相对新的浏览器 故意模拟许多在旧浏览器中存在的bug，特别是在IE4和IE5中
Quirks 和 Standards 区别
盒模型
在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，如：
input标签在Quirks 模式下，宽度和高度还包含了padding和border，如：
button标签
案例：input高度和button高度不一致的原因（Quirks怪癖怪异模式）
设置行内元素的高宽
- 在Standards模式下，给行内元素设置wdith和height都不会生效
- 在quirks模式下，则会生效
设置百分比的高度
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的 用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中
在quirks模式下却会失效。
参考：
https://blog.csdn.net/o3460765/article/details/52745702
https://blog.csdn.net/tianxintiandisheng/article/details/102528595
https://www.jianshu.com/p/86be91568847