document.compatMode的CSS1compat使用介绍


Posted in Javascript onApril 03, 2014

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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
javascript实现des解密加密全过程
Apr 03 #Javascript
无刷新预览所选择的图片示例代码
Apr 02 #Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 #Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 #Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 #Javascript
js 日期比较相关天数代码
Apr 02 #Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 #Javascript
You might like
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
js 表格隔行颜色
2009/12/02 Javascript
Javascript常考语句107条收集
2010/03/09 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
深入理解redux之compose的具体应用
2020/01/12 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
Python strip lstrip rstrip使用方法
2008/09/06 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
python可迭代对象去重实例
2020/05/15 Python
物流仓储实习自我鉴定
2013/09/25 职场文书
个人授权委托书
2014/04/03 职场文书
建设工地安全标语
2014/06/07 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
咖啡店创业计划书
2014/08/15 职场文书
总经理岗位职责范本
2015/04/01 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
800字作文之大雪
2019/12/04 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
redis实现排行榜功能
2021/05/24 Redis
Python实现byte转integer
2021/06/03 Python
django 认证类配置实现
2021/11/11 Python