来自:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html

问题描述:看到阮一峰的博客里面的代码使用到了document.compatMode == "BackCompat",不明所以,看到了这边博客。

对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途。今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。

document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat,对其解释如下:

BackCompat Standards-compliant mode is not switched on. (Quirks Mode)

CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

在实际的项目中,我们还需要在获取浏览是否IE,这样就可以得到IE的渲染模式了。在Ext中的代码:isBorderBox=isIE&&!isStrict。

当文档有了标准声明时, document.compatMode 的值就等于 "CSS1compat", 因此, 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明

var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;

document.compatMode用来判断当前浏览器采用的渲染方式。

官方解释:

BackCompat:标准兼容模式关闭。
CSS1Compat:标准兼容模式开启。

当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。

浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。

一个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码:

if (document.compatMode == "BackCompat") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == "CSS1Compat"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}

(以上代码兼容目前流行的全部浏览器,包括:IE、Firefox、Safari、Opera、Chrome)

document.compatMode介绍的更多相关文章

  1. 转 document.compatMode介绍

    对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途.今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的 ...

  2. document.compatMode

    在我电脑屏幕上显示的 电脑是 1920*1080这是在document.compatMode:css1Compat模式 window.screen.availWidth 1920 window.scr ...

  3. 前端面霸系列(1):doctype 、Quirks Mode & Standards Mode 、document.compatMode

    近几日,气压猛降,雾霾铺天盖地,眼看一场腥风血雨就要在前端江湖爆发,这场战争不仅是百度.腾讯.阿狸.搜狐网易新浪等江湖豪门抢夺人才的大战,也是诸位江湖人士重新洗牌的好时机.每年10月,江湖的波动胜过华 ...

  4. document.compatMode属性

    document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容模式开启. 当document.compat ...

  5. javascript document.compatMode属性

    文档模式在开发中貌似很少用到,最常见的是就是在获取页面宽高的时候,比如文档宽高,可见区域宽高等. IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Stand ...

  6. document.compatMode属性和获取鼠标的位置

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

  7. document.compatMode(判断当前浏览器采用的渲染方式)

    转载自:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html IE对盒模型的渲染在 Standards Mode和Quirk ...

  8. document.compatMode的CSS1compat

    document.compatMode BackCompat:标准兼容模式关闭.浏览器宽度:document.body.clientWidth: CSS1Compat:标准兼容模式开启. 浏览器宽度: ...

  9. artDialog Error: document.compatMode === "BackCompat 报错原因

    今天在使用artDialog的时候报错了提示artDialog Error: document.compatMode === "BackCompat 查了网上说 可以设置<!DOCTY ...

随机推荐

  1. Atitit。D&D drag&drop拖拽功能c#.net java swing的对比与实现总结

    Atitit.D&D drag&drop拖拽功能c#.net java swing的对比与实现总结 1. 实现一个D&D操作一般包括三个步骤: 1 2. .net黑头的拖曳机制 ...

  2. 167. Add Two Numbers【easy】

    You have two numbers represented by a linked list, where each node contains a single digit. The digi ...

  3. 虚拟机下安装centos7方法,修改系统语言为简体中文的方法

    说明 自己装系统时一般都可以自定义选择系统语言.可是云端服务器一般都是安装好的镜像,默认系统语言为英文,对于初学者可能还会有搞不懂的计算机词汇.这里简单说一下centos7怎么修改系统语言为中文. 虚 ...

  4. CSS3背景总结

    值 描述 CSS background-color 规定要使用的背景颜色. 1 background-position 规定背景图像的位置. 1 background-size 规定背景图片的尺寸. ...

  5. 数据库填充DataSet,逐行访问

    DataSet 对象是 Microsoft .NET 框架中数据访问的关键部分,是可保存表.视图和关系的内存中对象.本文介绍如何使用一个或多个数据库查询的结果填充 DataSet 对象,以及在将这些数 ...

  6. spring 注解@Resource @Autowired区别

    1.@Autowired寻找类的时候默认是ByType,也就是通过类的类型来寻找类.不过,也可以通过借助@Qualifier("name")来指定寻找的类名 @Autowired ...

  7. 原创jQuery插件之图片自适应

    效果图例如以下: 功能:使图片自适应居中位于容器内 限制:容器须要给定大小 用法: 1.引入jQuery.然后引入fitimg插件 2.给须要图片自适应的容器固定宽高 3.header .accoun ...

  8. oracle存储过程函数

    1.函数 create or replace function get_Destroy_no return varchar2 is Result varchar2(50);begin SELECT m ...

  9. VIM打开shell脚本中文乱码解决

    1. 查找 .vimrc文件 通常有2个地方保存这个文件的: (1) 在/etc/文件夹下面,是所有用户的vim配置 (2)每个用户的开始登录的文件夹下面,有些不一定有,比如hadoop用户,则在/h ...

  10. Linux下,PHP扩展安装(使用yum安装)

    直接操作linux,在命令模式下用yum 来安装PHP的扩展: 扩展:mysqli 命令: yum install php-mysqli 扩展:pdo 命令: yum install php-pdo