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 相关文章推荐
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
详解Document.Cookie
Dec 25 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
Openlayers实现地图的基本操作
Sep 28 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设计模式 Facade(外观模式)
2011/06/26 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
php中switch语句用法详解
2015/08/17 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP微信支付实例解析
2016/07/22 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
jquery实现购物车基本功能
2019/10/25 jQuery
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Django中Forms的使用代码解析
2018/02/10 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Django继承自带user表并重写的例子
2019/11/18 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Python如何实现的二分查找算法
2020/05/27 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
大学生的创业计划书就该这么写
2014/01/30 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
答谢会策划方案
2014/05/12 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
校长一岗双责责任书
2015/05/09 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android