浏览器的标准模式和怪异模式

面试题之浏览器的标准模式和怪异模式

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

标准模式:

是浏览器按照W3C标准解析执行代码,这样用规定的语法去渲染,就可以兼容各个浏览器,保证以正确的形式展示网页。

怪异模式:

是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。

2.为什么还要存在怪异模式呢?

在HTML与CSS的标准化未完成之前,各个浏览器对于HTML和CSS的解析有各自不同的实现,而有很多旧的网页都是按照这些非标准的实现去设计的。在HTML与CSS标准确定之后,浏览器一方面要按照标准去实现对HTML与CSS的支持,另一方面又要保证对非标准的旧网页设计的后向兼容性。因此,现代的浏览器一般都有两种渲染模式:标准模式和怪异模式。在标准模式下,浏览器按照HTML与CSS标准对文档进行解析和渲染;而在怪异模式下,浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。

3.浏览器如何确定使用哪种渲染模式?

如果你的页面添加了

<!DOCTYPE html>
( 注意:大小写不敏感),那么就等同于开启了标准模式。即如下面代码展示:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body></body>
</html>

如果省略了<!DOCTYPE html>,浏览器会采用不符合某些标准的渲染模式。

4.标准模式与怪异模式的常见区别

  • 盒模型的处理差异:标准CSS盒模型的宽度和高度等于内容区的高度和宽度,不包含内边距和边框,而IE6之前的浏览器实现的盒模型的宽高计算方式是包含内边距和边框的。因此,对于IE,怪异模式和标准模式下的盒模型宽高计算方式是不一样的。
  • 行内元素的垂直对齐:很多早期的浏览器对齐图片至包含它们的盒子的下边框,虽然CSS的规范要求它们被对齐至盒内文本的基线。标准模式下,基于Gecko的浏览器将会对齐至基线,而在quirks模式下它们会对齐至底部。最直接的例子就是图片的显示。在标准模式下,图片并不是与父元素的下边框对齐的,如果仔细观察,你会发现图片与父元素下边框之间存在一点小空隙。那是因为标准模式下,图片是基线对齐的。而怪异模式下,则不存在这个问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369181.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

printf函数输出超出int时怎么办

int、long、long long在printf中的格式 https://blog.csdn.net/fz_ywj/article/details/8107582 蓝桥杯 2796. BASIC-11 十六进制转十进制 从键盘输入一个不超过8位的正的十六进制数字符串&#xff0c;将它转换为正的十进制数后输出。   注&#xff1a;十六进制数中的10~15…

升级glibc的影响_Java 11 升级:“债务”“危机”

导读&#xff1a;AJDK11(阿里内部基于openJDK11的定制版本)在19年3月左右发布&#xff0c;到现在也快1年了&#xff0c;不过目前整体使用的面还是比较窄&#xff0c;特性被了解的也不是很多&#xff0c;Java11作为OpenJDK发布的LTS版本&#xff0c;对我们来说&#xff0c;还是需…

The processing instruction target matching [xX][mM][lL] is not allowed.

原因&#xff1a;xml标签 必须在第一行。 转载于:https://www.cnblogs.com/wangkang0320/p/7569100.html

周五尾盘上涨,配合周末消息,周一套人的经典实例

吸取中国软件的教训&#xff1a;注意这次是温柔的&#xff0c;只是收了个十字星&#xff0c;因为前期上涨后的需要缓和调整一下&#xff0c;而不是为了出逃。以后注意找个出逃的例子1、上周五尾盘上涨2、周末利好消息3、周一开盘高开4、高开后快速下探&#xff08;5分钟内&…

Spring Data,MongoDB和JSF集成教程

示例应用程序简介&#xff08;MongoShop产品目录&#xff09; 在学习完本教程之后&#xff0c;将构建具有以下功能要求的示例应用程序&#xff08;MongoShop产品目录&#xff09;&#xff1a; 1.搜索具有不同条件的产品&#xff08;例如&#xff0c;sku&#xff0c;产品类型&am…

表单元素

一、form form代表表单&#xff0c;功能&#xff1a;用于申明表单&#xff0c;定义采集数据的范围&#xff0c;也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。<form> 标签用于为用户输入创建 HTML 表单。表单能够包含input元素&#…

本人用python刷题时的错误总结

本人新手&#xff0c;在leetcode刷题过程中出现过很多问题&#xff0c;也发现了很多方法&#xff0c;故在此总结&#xff0c;不定时更新。 1、在创建一个二维列表的时候&#xff0c;我之前会用 a [[0] * 5] * 5, 但是这样输出的结果往往会跟期待的不一样&#xff0c;我一直以为…

增加 jQueryValidate的手机号验证功能

1、通过addMethod增加手机号的验证方法 &#xff08;位置&#xff1a;和$(form).validate({}) 同级别&#xff09; //增加手机号验证规则$.validator.addMethod("isMobile", function(value, element) {var length value.length;var mobile /^(13[0-9]{9})|(18[0-9…

C++的STL中accumulate的用法

https://blog.csdn.net/u011499425/article/details/52756242

Hibernate继承:每个类层次结构的表

在本教程中&#xff0c;我们将看到如何在hibernate中实现继承。有3种方法可以在hibernate中实现继承。在本文中&#xff0c;我们将看到其中一种&#xff0c;即每个类层次结构一个表。 休眠中的继承&#xff1a; Java是面向对象的语言&#xff0c;继承是Java的主要功能之一。关…

锁 mysql_Mysql的锁(S锁和X锁的区别)

共享锁和排它锁Mysql的锁系统&#xff1a;shared lock 和 exclusive lock (共享锁和排它锁&#xff0c;也叫读锁和写锁&#xff0c;即read lock和write lock)读锁是共享的&#xff0c;或者说是相互不阻塞的写锁是排他的&#xff0c;一个写锁会阻塞其他的写锁和读锁在实际的数据…

爬取新闻

import requests from bs4 import BeautifulSoup urlhttp://news.gzcc.cn/html/xiaoyuanxinwen/ resrequests.get(url) res.encodingutf-8 soupBeautifulSoup(res.text,html.parser) 1. 用requests库和BeautifulSoup库&#xff0c;爬取校园新闻首页新闻的标题、链接、正文。 fo…

平衡二叉树的自顶向下递归和自底向上递归

没太搞懂自顶向下和自底向上的递归区别

【简记】HTML CSS 的一些要点(不定时更新)

1.td占据多行 / 列时&#xff0c;其挤开的 td 不写&#xff08;但是包裹 td 的 tr 要写&#xff09; 2. display:td 的元素中的文本默认垂直不居中&#xff08;table中的td中的文本是垂直居中的&#xff09; 3.th虽然定义了表头标题&#xff0c;但是默认不跨行&#xff08;需…

通过地址访问 mysql_MySql通过ip地址进行访问的方法

1.登录mysql&#xff1a;mysql -u root -h 127.0.0.1 -p2.切换数据库use mysql3.授权grant all privileges on *.* to root127.0.0.1identified by 密码;将127.0.0.1换成公网的ip地址。4.检查my.ini4.1 看看是否有skip-networkingskip-networking开启该选项后就不能远程访问MyS…

幻像类型提高了编译时的安全性

介绍 使用幻像类型是一种非常简单的技术&#xff0c;可用于提高代码的编译时安全性。 有许多潜在的用例具有不同的复杂性级别&#xff0c;但是即使幻像类型的使用非常轻巧&#xff0c;也可以显着提高编译时的安全性。 幻像类型只是带有未使用类型参数的参数化类型。 例如&#…

NI Multisim元件库:在Multisim中创建自定义元器件

转载于&#xff1a; http://www.ni.com/tutorial/3173/zhs/ 概览 「在Multisim中创建自定义元器件」与「在 NI Ultiboard中创建自定义元器件」为您提供了关于如何直观、快速地学习如何创建您自己的自定义元器件的信息资源。目录 引言步骤一&#xff1a;输入初始元器件信息步骤二…

字符串的预处理

C isalpha、isalnum、islower、isupper用法 https://blog.csdn.net/weixin_41162823/article/details/80172379 C/C库函数&#xff08;tolower/toupper&#xff09;实现字母的大小写转换 https://blog.csdn.net/laozhuxinlu/article/details/51539737 字符串的逆序 https:…

2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板

本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板&#xff0c;该模板是一款强大并且非常灵活的后台管理系统模板&#xff1a;能适应绝大多数的web应用程序开发&#xff0c;比如&#xff1a;APP的管理后台&#xff0c;电商网站&#xff0…