参考链接：
https://www.2cto.com/kf/201805/751002.html
http://www.php.cn/div-tutorial-380752.html
浏览器的标准模式和怪异模式到底是什么？
标准模式：
是浏览器按照W3C标准解析执行代码，这样用规定的语法去渲染，就可以兼容各个浏览器，保证以正确的形式展示网页。
怪异模式：
是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
为什么还要存在怪异模式呢？
在HTML与CSS的标准化未完成之前，各个浏览器对于HTML和CSS的解析有各自不同的实现，而有很多旧的网页都是按照这些非标准的实现去设计的。在HTML与CSS标准确定之后，浏览器一方面要按照标准去实现对HTML与CSS的支持，另一方面又要保证对非标准的旧网页设计的后向兼容性。因此，现代的浏览器一般都有两种渲染模式：标准模式和怪异模式。在标准模式下，浏览器按照HTML与CSS标准对文档进行解析和渲染；而在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。
浏览器如何确定使用哪种渲染模式？
如果你的页面添加了<!DOCTYPE html>(注意：大小写不敏感)，那么就等同于开启了标准模式。即如下面代码展示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
如果省略了，浏览器会采用不符合某些标准的渲染模式。
标准模式与怪异模式的常见区别
-
盒模型的处理差异：标准CSS盒模型的宽度和高度等于内容区的高度和宽度，不包含内边距和边框，而IE6之前的浏览器实现的盒模型的宽高计算方式是包含内边距和边框的。因此，对于IE，怪异模式和标准模式下的盒模型宽高计算方式是不一样的；
-
行内元素的垂直对齐：很多早期的浏览器对齐图片至包含它们的盒子的下边框，虽然CSS的规范要求它们被对齐至盒内文本的基线。标准模式下，基于Gecko的浏览器将会对齐至基线，而在quirks模式下它们会对齐至底部。最直接的例子就是图片的显示。在标准模式下，图片并不是与父元素的下边框对齐的，如果仔细观察，你会发现图片与父元素下边框之间存在一点小空隙。那是因为标准模式下，图片是基线对齐的。而怪异模式下，则不存在这个问题。
两者的区别：
1.盒模式的解析上：
在strict mode 中： width是内容宽度
在quirks mode 中： width则是元素的实际宽度，
而内容宽度 = width- (margin-left + margin-right + padding-left + padding-right + border-left + border-right)
- 图片元素垂直对齐方式
在strict mode 中： vertical-align 属性默认取值为baseline
在 quirks mode 中： vercital-align 属性默认为bottom，因此在图片底部会有几像素的空间。
3.<table>元素中的字体
quirks mode 下，对于table元素，字体的某些属性将不会从body或其它封闭元素继承到table中，特别是font-size属性
4，内联元素的尺寸
在standards mode 下，non-repalced inline 元素无法自定义大小，而在quirks mode 下，定义这些元素的width 和 height属性，能够影响改元素显示的大小尺寸
5.元素的百分比高度
当一个元素使用百分比高度时，在standards mode 下 高度取决于内容的变化，而在 quirks mode 下，百分比能被正确的应用
6.元素的溢出处理
在 stand mode下， overflow取默认值visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外，而在quirks mode下，该溢出被当作跨展box来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容
网友评论