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 相关文章推荐
Prototype Number对象 学习
Jul 19 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
bootstrap css样式之表单
Jan 19 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
js实现弹窗猜数字游戏
Nov 26 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面向对象中的魔术方法中文说明
2014/03/04 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
js 火狐下取本地路径实现思路
2013/04/02 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
React组件的三种写法总结
2017/01/12 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
python安装与使用redis的方法
2016/04/19 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python与R语言的简要对比
2017/11/14 Python
全面分析Python的优点和缺点
2018/02/07 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
软件测试笔试题
2012/10/25 面试题
打造完美自荐信
2014/01/24 职场文书
元旦晚会邀请函
2014/02/01 职场文书
新年团拜会主持词
2014/04/02 职场文书
初中学生期末评语
2014/04/24 职场文书
绘画专业自荐信
2014/07/04 职场文书
自主招生学校推荐信
2014/09/26 职场文书
政风行风整改报告
2014/11/06 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS