严格模式

浏览器根据w3c的规范来解析代码

混杂模式

浏览器根据自己的规范来解析代码

通常模拟 老式浏览器 的行为，以防止老站点无法工作。

缺点：相同代码，在不同的浏览器上，显示效果不同

区分浏览器使用哪种模式

与网页中的 DTD 直接相关。

1. 如果文档包含严格的 DOCTYPE ，一般以严格模式解析，如：<!DOCTYPE html>

2. 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。

3. DOCTYPE 不存在或定义错误，会导致文档以混杂模式呈现。

4. HTML5 没有严格模式与混杂模式的区别

严格模式和混杂模式的区别

1. 混杂模式下盒子模型的高宽包括padding和border，而W3C标准中设置一个元素的高宽指的是content的高宽；
2. 混杂模式下可以设置行内元素的高度，而标准模式下不生效；
3. 标准模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度无效；
4. 标准模式下使用margin:0 auto;可以使元素水平居中，但是在混杂模式下会失效；混杂模式下需要设置text-align:center;来进行水平居中；
5. 混杂模式下设置图片padding会失效；
6. 混杂模式下Table中的字体属性不能继承上层的设置；
7. 混杂模式下white-space:pre会失效。

参考

https://www.cnblogs.com/kinoko-1009/p/10270117.html
https://www.cnblogs.com/microcosm/p/6501622.html

原文出处：/show_1IX3h5gZgR2R.html