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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
Javascript 面试题随笔
Mar 31 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
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 冒泡排序 交换排序法
2011/05/10 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
说说node中的可读流和可写流的区别
2018/06/01 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
基于python实现从尾到头打印链表
2019/11/02 Python
初学者学习Python好还是Java好
2020/05/26 Python
python中的yield from语法快速学习
2020/11/06 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
外企测试工程师面试题
2015/02/01 面试题
初二学习计划书范文
2014/04/27 职场文书
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS