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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 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/05 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
js 深拷贝函数
2008/12/04 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
jquery图片切换插件
2015/03/16 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Django框架序列化与反序列化操作详解
2019/11/01 Python
python绘制雪景图
2019/12/16 Python
基于Pytorch SSD模型分析
2020/02/18 Python
浅析python函数式编程
2020/09/26 Python
python定时截屏实现
2020/11/02 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
python 装饰器重要在哪
2021/02/14 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
应届毕业生求职信
2013/11/30 职场文书
21岁生日感言
2014/02/27 职场文书
2014年元旦感言
2014/03/06 职场文书
2014年内勤工作总结
2014/11/24 职场文书
入党个人总结范文
2015/03/02 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技