document.compatMode简介
对于document.compatMode,很多朋友可能很少接触,知道他的存在却不清楚他的用途。今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的web页面还是很有帮助。
我们都知道,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。
~~~ie 声明DOCTYPE时为Standards Mode,不声明DOCTYPE时为 Quirks Mode,两种模式对盒模型的解释有很大的不同。Standards Mode下的盒模型和标准浏览器一致。document.compatMode属性可以帮助我们判断当前文档的渲染模式
document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat,对其解释如下:
BackCompat: Standards-compliant mode is not switched on. (Quirks Mode) ~~~向后兼容模式 即 Quirks Mode
CSS1Compat: Standards-compliant mode is switched on. (Standards Mode) ~~~ CSS1标准兼容模式 即 Standards Mode
在实际的项目中,我们还需要在获取浏览是否IE,这样就可以得到IE的渲染模式了。
在Ext中的代码:
var ua = navigator.userAgent.toLowerCase(); //用户代理信息
var isStrict = document.compatMode == "CSS1Compat",
isIE = !isOpera && ua.indexOf("msie") > -, //非Opera 且 用户代理信息包含 msie 表明为ie;
isBorderBox=isIE&&!isStrict; //ie 且 backCompat模式 则 width height指borderBox的大小;
当文档有了标准声明时, document.compatMode 的值就等于 "CSS1compat", 因此, 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
document.compatMode简介的更多相关文章
- document.compatMode
在我电脑屏幕上显示的 电脑是 1920*1080这是在document.compatMode:css1Compat模式 window.screen.availWidth 1920 window.scr ...
- 前端面霸系列(1):doctype 、Quirks Mode & Standards Mode 、document.compatMode
近几日,气压猛降,雾霾铺天盖地,眼看一场腥风血雨就要在前端江湖爆发,这场战争不仅是百度.腾讯.阿狸.搜狐网易新浪等江湖豪门抢夺人才的大战,也是诸位江湖人士重新洗牌的好时机.每年10月,江湖的波动胜过华 ...
- document.compatMode属性
document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容模式开启. 当document.compat ...
- javascript document.compatMode属性
文档模式在开发中貌似很少用到,最常见的是就是在获取页面宽高的时候,比如文档宽高,可见区域宽高等. IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Stand ...
- document.compatMode属性和获取鼠标的位置
document.compatMode属性 document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容 ...
- document.compatMode(判断当前浏览器采用的渲染方式)
转载自:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html IE对盒模型的渲染在 Standards Mode和Quirk ...
- document.compatMode的CSS1compat
document.compatMode BackCompat:标准兼容模式关闭.浏览器宽度:document.body.clientWidth: CSS1Compat:标准兼容模式开启. 浏览器宽度: ...
- artDialog Error: document.compatMode === "BackCompat 报错原因
今天在使用artDialog的时候报错了提示artDialog Error: document.compatMode === "BackCompat 查了网上说 可以设置<!DOCTY ...
- document.compatMode属性介绍
之前不了解这个属性,今天总结一下,以后可能会用到. 对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途.今天在ext中看到 document.co ...
随机推荐
- 如何判断是否按下Ctrl键 - C#
可根据Control.ModifierKeys来判断用户是否按下了组合键. if ((Control.ModifierKeys & Keys.Control) == Keys.Control) ...
- Bootstrap学习之一起步
说起Bootstrap,第一次接触到这个名词的时候还是同事在做自适应页面技术分享会时了解到,在之后的项目中就逐渐应用了这个前端WEB CSS框架.
- Asp.Net写文本日志
底层代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespac ...
- SQlSERVER生成唯一编号
基数表-用来存储编号前缀和类型 建表如下 CREATE TABLE [dbo].[SerialNo]( [sCode] [varchar](50) NOT NULL, [sName] [varchar ...
- 用原生JS写移动动画案例及实际应用
js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...
- CreateEvent,OpenEvent成功后 是否需要::CloseHandle(xxx); 避免句柄泄漏
bool bExist = false; HANDLE hHandle = ::CreateEvent(NULL, FALSE, FALSE, L"Global\\xxxxx_name ...
- Android应用如何开机自启动、自启动失败原因
本文主要介绍Android应用如何开机自启动.自启动失败的原因.adb命令发送BOOT_COMPLETED.问题:应用程序是否可以在安装后自启动,没有ui的纯service应用如何启动?答案马上揭晓^ ...
- Hive 入门(转)
#创建表人信息表 person(String name,int age) hive> create table person(name STRING,age INT)ROW FORMAT DE ...
- HDU 4498 Function Curve (分段, simpson)
转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents by---cxlove 最近太逗了...感觉成都要打铁了...只能给队友端 ...
- 使用反射类、Class类获取指定的构造器并实例化对象
package com.test; public class Car { private String brand; private String color; private int maxSpee ...