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 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
vue2.0 路由模式mode="history"的作用
Oct 18 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
vue-property-decorator用法详解
Dec 12 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设计模式之数据对象映射模式
2016/03/03 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Python字符串及文本模式方法详解
2020/09/10 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
init进程的作用
2012/04/12 面试题
写给女朋友的检讨书
2014/01/28 职场文书
效能监察建议书
2014/05/19 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏