JS判断doctype文档模式-document.compatMode
IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。
document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat。
BackCompat:标准兼容模式关闭。浏览器客户区宽度是document.body.clientWidth;
CSS1Compat:标准兼容模式开启。 浏览器客户区宽度是document.documentElement.clientWidth。
那么写了个准确获取网页客户区的宽高、滚动条宽高、滚动条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;
}
本文所说的“浏览器窗口中文档(下面简称“视口”)可用尺寸”指浏览器中文档显示区域的尺寸,不包括标题栏、工具栏、滚动条等内容。
在处理这一信息时,不同浏览器和同一浏览器不同版本中有一些差别,说明如下:
(1)在 IE4、IE5 和 没有声明 DOCTYPE 的 IE6 中,视口的这一信息保存在“body”元素中,可以用 document.body.offsetWidth / offsetHeight 获取,
(2)在声明了DOCTYPE 的 IE6 中 ,视口的这一信息保存在 document.documentElement 中,可以用 document.documentElement.clientWidth / clientHeight 获取。
(3)除了 IE 以外的所有浏览器都将此信息保存在 window 对象中,可以用 window.innerWidth / innerHeight 获取
JS判断doctype文档模式-document.compatMode的更多相关文章
- <meta>指定浏览器模式(browser mode)或文档模式(document mode)无效
这是前两天解决的一个故障,准确的说它不是一个SharePoint的问题,而是IE8浏览器或者说是HTML代码的问题,但我感觉还是挺有意思的,所以贴上来分享一下. 基础知识 简单的讲,就是IE浏览器中有 ...
- JS魔法堂:精确判断IE的文档模式by特征嗅探
一.前言 苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器 ...
- DOCTYPE是什么鬼?文档模式又是什么鬼?
!DOCTYPE !DOCTYPE是什么: 在所有 HTML 文档中规定 DOCTYPE 是非常重要的,这样浏览器就能了解预期的文档类型, 告诉浏览器要通过哪一种规范(文档类型定义 DTD)解析文档( ...
- 关于html中的doctype的重要性的认知以及IE的浏览器模式与文档模式
浏览器模式”用于切换IE针对该网页的默认文档模式.对不同版本浏览器的条件备注解析.发送给网站服务器的用户代理(User-Agent)字符串的值.网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版 ...
- IE11新文档模式Edge介绍与评估,及在WebBrowser应用中的使用。
浏览器模式与文档模式概念是怎么来的? 1.浏览器模式与文档模式概念起源 为了解决兼容性的问题,在IE浏览器(IE8, IE9, IE10)中,引入了浏览器模式和文档模式两个概念,浏览网页时可以通过按F ...
- <JavaScript>“浏览器模式”和“文档模式”之间的区别
只有IE浏览器中才会有“浏览器模式”和“文档模式”,兼容性视图涉及两个重要的功能便是“浏览器模式[browser mode]”和“文档模式[document mode]”,在IE8/IE9中按F12键 ...
- 深入理解DOM节点类型第七篇——文档节点DOCUMENT
× 目录 [1]特征 [2]快捷访问 [3]文档写入 前面的话 文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点.本文将详细介绍文档节点document的内 ...
- 2013第49周三IE9文档模式
今天完善了原有模块的代码和注释,然后继续之前新模块的开发,并写了两边的service接口,除了因为邮件中有部分问题让我分心外,专心下来写代码的感觉真好,今天基本上没遇到多少让我新感悟的技术问题,就总结 ...
- 【IE】浏览器模式与文档模式 及其开发中处理方式
原文:http://blog.csdn.net/neo_liu0000/article/details/7589731 什么是浏览器模式和文本模式? 经常使用IE开发者工具的同学,肯定见过浏览器模式和 ...
随机推荐
- 网络层 IP 协议首部格式与其配套使用的四个协议(ARP,RARP,ICMP,IGMP)
目录 IP协议首部格式地址解析协议 ARP逆向地址解析协议 RARP网际控制报文协议 ICMP网际组管理协议IGMP IP 数据报首部 IP数据报首部格式: 最高位在左边,记为0 bit:最低位在右边 ...
- 优化C/C++代码的小技巧(转)
源:http://www.cnblogs.com/lizhenghn/p/3969531.html 说明: 无意看到一篇小短文,猜测作者应该是一个图形学领域的程序员或专家,介绍了在光线(射线)追踪程序 ...
- public private proteccted区别
public公共,加上这个修饰的类或属性,可以在同一个包或者别的包里面访问 private私有的,加上这个修饰的类或属性,只能在同类里访问,同包和别的包不能访问 protected保护,加上这个修饰的 ...
- 用CSS让文字居于div的底部
css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部 ...
- HDU 1160 FatMouse's Speed 动态规划 记录路径的最长上升子序列变形
题目大意:输入数据直到文件结束,每行两个数据 体重M 和 速度V,将其排列得到一个序列,要求为:体重越大 速度越低(相等则不符合条件).求这种序列最长的长度,并输出路径.答案不唯一,输出任意一种就好了 ...
- 为图片存储而作——记一次UEditor源码的修改
本文版权归博客园和作者吴双本人共同所有. 写在前面 这是一个数据爆发的网络时代,大家习惯于浏览图文直观带给我们的快速信息.大图片的存储和浏览经常会成为Web服务器的瓶颈.试想如果你的Web服务器依然 ...
- 基于Hibernate注解的解读
一.综述 目前为止项目用到的实体类关系有3种: 单向一对多 单向多对一 双向一对多(双向多对一) 二.说明 @Entity --注释声明该类为持久类.将一个Javabean类声明为一 个实体的数据库表 ...
- c语言基本数据类型short、int、long、char、float、double
C 语言包含的数据类型如下图所示: 一.数据类型与“模子”short.int.long.char.float.double 这六个关键字代表C 语言里的六种基本数据类型. 怎么去理解它们呢? 举个例子 ...
- 支持持久化的内存数据库-----Redis
一.Redis概述 1.1.什么是Redis Redis是一种高级key-value数据库.它跟memcached类似,不过数据 可以持久化,而且支持的数据类型很丰富.有字符串,链表,集 合和有序集合 ...
- vs 2012svn 插件设置