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 相关文章推荐
window.location不跳转的问题解决方法
Apr 17 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
JavaScript实现背景自动切换小案例
Sep 27 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中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
JS实现小米轮播图
2020/09/21 Javascript
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
Python判断有效的数独算法示例
2019/02/23 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
python getpass实现密文实例详解
2019/09/24 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
文案策划求职信
2014/03/18 职场文书
食品安全承诺书
2014/05/22 职场文书
大学生创业事迹材料
2014/12/30 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
MySQL一些常用高级SQL语句
2021/07/03 MySQL