document.compatMode的CSS1compat使用介绍

2014-04-03 23

document.compatMode

BackCompat:标准兼容模式关闭。浏览器宽度:document.body.clientWidth;

CSS1Compat:标准兼容模式开启。 浏览器宽度:document.documentElement.clientWidth。

var d = document, 
dd = d.documentElement, 

db = d.body, 

dc = d.compatMode == 'CSS1Compat', 

dx = dc ? dd: db; 
cWidth = dx.clientWidth; 
cHeight = dx.clientHeight; 
sWidth = dx.scrollWidth; 
sHeight = dx.scrollHeight; 
sLeft = dx.scrollLeft; 
sTop = dx.scrollTop;

在Standars mode中:

元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

在Quirks mode中:

width则是元素的实际宽度,内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

在js中如何判断当前浏览器正在以何种方式解析?
document对象有个属性compatMode ,它有两个值:

BackCompat 对应quirks mode
CSS1Compat 对应strict mode

浏览器的兼容性表

http://www.quirksmode.org/compatibility.html

历史原因:

当早期的浏览器Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要,众多的浏览器开始依照W3C标准解析CSS,仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式)
firefly

展开阅读全文

更多Javascript文章

js之事件冒泡和事件捕获详细介绍
Oct 28 39
JavaScript中的正则表达式简明总结
Apr 04 41
jQuery实现友好的轮播图片特效
Jan 12 31
NodeJS学习笔记之Connect中间件应用实例
Jan 27 36
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 32
NodeJs 文件系统操作模块fs使用方法详解
Nov 26 36
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 43
手机访问当前页面