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 学习之旅 (2)
Feb 05 Javascript
javascript天然的迭代器
Oct 29 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
jQuery 选择器详解
Jan 19 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 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.ini中文版
2006/10/09 PHP
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Django 返回json数据的实现示例
2020/03/05 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
python归并排序算法过程实例讲解
2020/11/04 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
安全教育月活动总结
2014/05/05 职场文书
公司董事任命书
2015/09/21 职场文书
MySQL实现配置主从复制项目实践
2022/03/31 MySQL