web前端之浏览器篇——compatMode混杂模式和标准模式

web前端之浏览器篇——compatMode混杂模式和标准模式

一、介绍

浏览器解析文档时会按document.compatMode属性来渲染。
其值是个枚举值,如下:
“BackCompat”:怪异模式,也称混杂模式
“CSS1Compat”:标准模式或者准标准模式。
另外,准标准模式已和标准模式相同,两者已被标准模式代替。

二、compatMode兼容性

具体兼容浏览器版本如下:
在这里插入图片描述

三、区别

IE对css样式盒模型的渲染在 Standards Mode和Quirks Mode这两者模式下有很大区别,当html没有Doctype声明时ie默认是Quirks Mode,标准的模式下不同浏览器渲染方式一样,故从兼容性考虑需要对ie多不同处理。(亲测ie6以上支持Standards Mode)
在获取页面或区域宽高,滚动条位置有很大区别,如下:

样式 Standards Mode Quirks Mode
height document.documentElement.clientHeight document.body.clientHeight;
width document.documentElement.clientWidth document.body.clientWidth
scrollWidth document.documentElement.scrollWidth document.body.scrollWidth
scrollHeight document.documentElement.scrollHeight document.body.scrollHeight
scrollLeft document.documentElement.scrollLeft document.body.scrollLeft
scrollTop document.documentElement.scrollTop document.body.scrollTop

猜你喜欢

转载自blog.csdn.net/qq_29510269/article/details/106235827