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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
老生常谈js数据类型
Aug 03 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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的FTP学习(四)
2006/10/09 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
基于并发服务器几种实现方法(总结)
2017/12/29 Python
tensorflow识别自己手写数字
2018/03/14 Python
超简单的Python HTTP服务
2019/07/22 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
送给程序员的20个Java集合面试问题
2014/08/06 面试题
优秀生推荐信范文
2013/11/28 职场文书
四年级数学教学反思
2014/02/02 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
会议邀请函
2015/01/30 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
创业计划书之面包店
2019/09/17 职场文书
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技