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 相关文章推荐
jquery remove方法应用详解
Nov 22 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 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输出九九乘法表代码实例
2015/03/27 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
目前最全的python的就业方向
2018/06/05 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
PyQt5 多窗口连接实例
2019/06/19 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Django 返回json数据的实现示例
2020/03/05 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
小学生暑假感言
2014/02/06 职场文书
教师暑期培训感言
2014/08/15 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
学校财务管理制度
2015/08/04 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL