浏览器标准模式和怪异模式之间的区别是什么?
文件路径:http://bbs.daxiangclass.com/?thread-190.htm
【浏览器标准模式和怪异模式之间的区别是什么?】浏览器标准模式:浏览器按照HTML与CSS标准对文档进行解析和渲染
浏览器怪异模式:浏览器按照原有的非标准的对文档进行解析和渲染
(浏览器标准模式:浏览器按W3C标准解析执行代码,浏览器怪异模式:浏览器自己的方式解析执行代码)
下面再说说他的的区别:
1. 占地面积
2. 图片元素的垂直对齐方式
3. 元素中的字体
4. 内联元素的尺寸
5. 元素的百分比高度
6. 元素溢出的处理
1)占地面积
文章图片
浏览器标准模式:
内容的宽度:直接就是width的值
元素真正的宽度= margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
文章图片
浏览器怪异模式:
内容的宽度:width-(padding-left+border-left-width+padding-right+border-right-width)
元素真正的宽度:直接是width
2) 图片元素的垂直对齐方式：
标准模式下: vertical-align的默认值是:baseline
怪异模式下:vertical-align的默认值则是bottom
3)Table元素中的字体：
标准模式下:可以被继承
怪异模式下:不能被继承的
4) 内联元素的尺寸：
标准模式下:non-replaced inline元素无法自定义大小
怪异模式下:定义这些元素的宽高会影响到显示尺寸
5) 元素的百分比高度：
标准模式下:百分比是元素的高度,不可以是负值
怪异模式下:百分比高度会被正确应用
6) 元素溢出的处理：
标准模式下:overflow默认值visible
怪异模式下:溢出会被当做扩展box来对待，元素的大小由内容决定，溢出不会裁减，元素框自动调整，包含溢出内容
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- 活跃社群的核心标准是什么（）
- 分享！如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- --木木--|--木木-- 第二课作业#翼丰会（每日一淘6+1实战裂变被动引流# 6+1模式）
- 设计模式-代理模式-Proxy
- 【译】Rails|【译】Rails 5.0正式发布（Action Cable，API模式等）
- java静态代理模式
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- 今日份H5
- 3.css浮动