浏览器标准模式和怪异模式之间的区别是什么

阳光穿透心脏的1/2处 2021-06-26 16:06 544阅读 0赞

在标准模式页面按照`HTML,CSS`的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循`W3C`标准而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式，如果存在一个完整的`DOCTYPE`则浏览器将会采用标准模式，如果缺失就会采用怪异模式。下面介绍标准模式和怪异模式之间的区别

## （1 ）盒模型： ##

在怪异模式下，盒模型为IE盒模型，  
![在这里插入图片描述][20190720234626483.png]  
而在W3C标准的盒模型中为  
![在这里插入图片描述][20190720234703541.png]

## （2）图片元素的垂直对齐方式： ##

对于`inline`元素和`table-cell`元素，标准模式下`vertical-align`属性默认取值为`baseline`，在怪异模式下，`table`单元格中的图片的`vertical-align`属性默认取值为`bottom`，因此在图片底部会有及像素的空间。

## （3）`<table>`元素中的字体： ##

CSS中，对于`font`的属性都是可以继承的，怪异模式下，对于`table`元素，字体的某些元素将不会从body等其他封装元素中继承得到，特别是font-size属性。

## （4）内联元素的尺寸： ##

标准模式下，`non-replaced inline`元素无法自定义大小，怪异模式下，定义这些元素的width，height属性可以影响这些元素显示的尺寸。

## （5）元素的百分比高度： ##

a：CSS中对于元素的百分比高度规定如下：百分比为元素包含块的高度，不可为负值，如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须在父元素有高度声明的情况下使用。

b：当一个元素使用百分比高度时，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被正确应用。

## （6）元素溢出的处理： ##

标准模式下，`overflow`取默认值`visible`，在怪异模式下，该溢出会被当做扩展`box`来对待，即元素的大小由其内容决定，溢出不会裁减，元素框自动调整，包含溢出内容。

## 浏览器标准模式和怪异模式之间的区别是什么? ##

1、浏览器的标准模式和怪异模式究竟是什么？标准模式：是浏览器按照W3C标准解析执行代码，这样用规定的语法去渲染，就可以兼容各个浏览器，保证以正确的形式展示网页。怪异模式：是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。

2、为什么还要存在怪异模式呢？在`HTML`与`CSS`的标准化未完成之前，各个浏览器都有自己的解析，而有很多旧的网页都是按照这些非标准的实现去设计的。在`HTML`与`CSS`标准确定之后，浏览器一方面要按照标准去实现对`HTML`与`CSS`的支持，另一方面又要保证对非标准的旧网页的兼容。

3、浏览器如何确定用那种渲染模式？如果你的页面添加了(注意：大小写不敏感)，那么就等同于开启了标准模式。如果省略了，浏览器会采用不符合某些标准的渲染模式。

4.标准模式和怪异模式常见的区别是什么？盒模型的处理差异：  
1、标准模式：`总宽度=width+margin(左右)+padding(左右)+border(左右)`  
2、怪异模式：`总宽度=width+margin(左右)（width直接包括了padding(左右)+border(左右) ）`

[20190720234626483.png]: /images/20210626/4e04408c7e00491dbef254855ac5e61f.png
[20190720234703541.png]: /images/20210626/06166ec5695a455f9f9870ecae0b679f.png