专注前端行业精选
Q站 - L站 -
当前位置:网站首页 > 最近更新 > 前端开发 > 面试题 > 正文

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

作者:鹏仔先生日期:2020-06-01 17:19:11浏览:857分类:面试题

这是个历史遗留问题,W3C标准推出前,旧的页面都是根据旧的渲染方式对页面进行渲染的,因此在W3C标准推出后为了保证旧页面的正常显示,保持浏览器的兼容性,这样浏览器上就产生了能够兼容W3C标准渲染的严格模式和保证旧页面显示的怪异模式的标准兼容模式。


具体表现:
    1. 在严格模式中 :width是内容宽度 ,元素真正的宽度 = margin一left + border一left一width + padding一left + width + padding一right + border一right一 width +  margin一right;

        在怪异模式中 :width则是元素的实际宽度 ,内容宽度 = width 一 ( padding一left + padding一right + border一left一width + border一right一width)
    2. 可以设置行内元素的高宽
        在标准模式下,给span等行内元素设置wdith和height都不会生效,而在怪异模式下,则会生效。
    3. 可设置百分比的高度
        在标准模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。
    4. 用margin:0 auto设置水平居中在IE下会失效
        使用margin:0 auto在标准模式下可以使元素水平居中,但在怪异模式下却会失效, 怪异模式下的解决办法,用text一align属性:body{text一align:center};#content{text一align:left}
    5. 怪异模式下设置图片的padding会失效
    6. 怪异模式下Table中的字体属性不能继承上层的设置
    7. 怪异模式下white一space:pre会失效



手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯