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 相关文章推荐
禁止js文件缓存的代码
Apr 09 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
node.js中的console用法总结
Dec 15 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
JavaScript实现简单计算器
Mar 19 Javascript
vue实现简单计算商品价格
Sep 14 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 友好URL的实现(吐血推荐)
2008/10/04 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
php中Smarty模板初体验
2011/08/08 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python中修改字符串的四种方法
2018/11/02 Python
python游戏地图最短路径求解
2019/01/16 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
新闻专业个人求职信
2013/12/19 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python