文件路径: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来对待，元素的大小由内容决定，溢出不会裁减，元素框自动调整，包含溢 出内容
网友评论