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

浏览器的兼容性表

历史原因:

当早期的浏览器Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要,众多的浏览器开始依照W3C标准解析CSS,仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式)

document.compatMode的CSS1compat相关推荐

  1. document.compatMode属性

    document.compatMode用来判断当前浏览器采用的渲染方式. document.compatMode属性值: BackCompat:标准兼容模式关闭. CSS1Compat:标准兼容模式开 ...

  2. 关于js里的document.compatmode

    document.compatmode为获取页面的渲染模式. 其中有两个渲染模式 1.CSS1Compat(标准模式).浏览器宽度:document.documentElement.clientHei ...

  3. document.compatMode

    今天看到了document.compatMode属性,平时对文档模式不是很了解,于是test了这个属性. document.compatMode的值有两种,分别为"BackCompat&qu ...

  4. document.compatMode介绍

    document.compatMode 检查当前的文档渲染模式 返回值:BackCompat和CSS1Compat: IE对两种模式渲染差别很大: BackCompat: Standards-comp ...

  5. IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight的差别

    当页面实际内容高度大于浏览器可视区域高度时 a. IE下 b. FF下 当页面实际内容高度小于浏览器可视区域高度时 a. IE下 b. FF下 由此有以下结论 clientHeight 在IE和FF下 ...

  6. document.documentElement与document.body

    写前端时遇到这两种方法,转载待以后查看. 两种特殊的文档属性可用来访问根节点: document.documentElement document.body 第一个属性可返回存在于 XML 以及 HT ...

  7. 这些东西,你知道吗?是否忘记了

    1)nodeType 属性可返回节点的类型. 最重要的节点类型是: value  1 表示 元素element :2表示 属性attr :3表示文本text:8 表示注释:9表示 文档document ...

  8. 前端知识点梳理(二)

    1.内核 浏览器内核(Rendering Engine)最初分为:渲染引擎(layout engineer)或(Rendering Engine)和js引擎:后来 JS 引擎越来越独立,内核就倾向于单 ...

  9. html悬浮窗口退出,网页中可关闭的漂浮窗口实现

    注释部分为广告的左右调节,可以自行设定 网页中可关闭的漂浮窗口 关闭 点击这里,关闭广告!!! var bodyfrm = ( document.compatMode.toLowerCase()==& ...

最新文章

  1. iOS并发编程指南之同步
  2. 成长 | 《大厂晋升指南》学习总结(上)
  3. ASP.NET缓存:方法分析和实践示例
  4. 【HDU - 3342】Legal or Not(拓扑排序)
  5. 爬虫-例子-飞机图片的提取-抓取一个文章中的全部图片
  6. Elasticsearch使用备忘
  7. UML之一综合设计例题
  8. java重入锁 自旋锁_java 自旋锁(可重入且无死锁)
  9. environment variable is too large 2047
  10. 查看GCC编译优化的具体选项开关
  11. 数学建模常用模型和算法介绍
  12. 计算机睡眠与休眠有什么区别,小编教你电脑睡眠和休眠的区别是什么.
  13. mysql blast2go,blast2go
  14. 《高仿支付宝运动轨迹七日曲线图》
  15. 微信的新功能,快来试一下
  16. vivo手机删除自带程序方法
  17. 笔记本修改无线网卡MAC地址
  18. 终于搞懂了el-dialog属性modal-append-to-body,append-to-body的作用【图解】
  19. 熔喷布喷丝板模具微孔加工技术工艺
  20. Python实现自动批改作业系统~

热门文章

  1. java二维数组水平翻转,C 语言 利用二维数组实现对输入的数组进行翻转
  2. c 向html页面传值,html页面之间的传值,获取元素和方法的调用
  3. int x = 0x13 c语言,2004年7月全国高等教育自学考试微型计算机原理与接口技术试题...
  4. php课程设计实验心得,PHP程序设计教程实验及课程设计
  5. c语言注释部分两侧的分界符号分别是,c语言中界定注释的符号分别是什么?
  6. ue 清理缓存_【PM项目管理系统】PM安装更新客户端、删除UE及清理IE缓存操作手册...
  7. 【 Grey Hack 】反向Shell
  8. Hi3520D UART2和UART3是如何加载到内核的
  9. Java 高级类(上) —— 抽象类和接口
  10. Java 基础——类的加载