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 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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时的4个配置修改说明
2015/10/19 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
django删除表重建的实现方法
2019/08/28 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python打开文件的方式有哪些
2020/06/29 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
升职自荐信
2013/11/28 职场文书
单位领导证婚词
2014/01/14 职场文书
中学家长会邀请函
2014/02/03 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
消夏晚会主持词
2015/06/30 职场文书
python实现自动化群控的步骤
2021/04/11 Python