欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

浏览器中关于标准模式与怪异模式的解析

程序员文章站 2022-04-10 14:54:38
...

浏览器的标准模式和怪异模式到底是什么?

标准模式:

是浏览器按照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模式下它们会对齐至底部。最直接的例子就是图片的显示。在标准模式下,图片并不是与父元素的下边框对齐的,如果仔细观察,你会发现图片与父元素下边框之间存在一点小空隙。那是因为标准模式下,图片是基线对齐的。而怪异模式下,则不存在这个问题。

以上就是浏览器中关于标准模式与怪异模式的解析的详细内容,更多请关注其它相关文章!