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 ModeQuirks Mode
heightdocument.documentElement.clientHeightdocument.body.clientHeight;
widthdocument.documentElement.clientWidthdocument.body.clientWidth
scrollWidthdocument.documentElement.scrollWidthdocument.body.scrollWidth
scrollHeightdocument.documentElement.scrollHeightdocument.body.scrollHeight
scrollLeftdocument.documentElement.scrollLeftdocument.body.scrollLeft
scrollTopdocument.documentElement.scrollTopdocument.body.scrollTop

版权声明:本文为qq_29510269原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。