WEB开发兼容性---浏览器渲染模式—— document.compatMode
document.compatMode主要是用来判断浏览器采用何种方式渲染,它有两种可能的返回值:BackCompat和CSS1Compat,官方对其解释如下:
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)
WEB开发兼容性---浏览器渲染模式—— document.compatMode的更多相关文章
- document.compatMode 浏览器渲染模式判定利器
在加了DOCTYPE的页面document.compatMode输出CSS1Compat,不管加的是XHTML的还是HTML5的DOCTYPE.没有加的输出BackCompat. BackCompat ...
- JS判断doctype文档模式-document.compatMode
IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有 ...
- 移动web开发介绍——浏览器
前段时间了解学习了一下<移动Web手册>,觉得真的需要这种不是偏向技术.框架或工具的书籍,只是单纯的讲解一些关于移动Web最基本的知识.正好今天整理一部分之前学习过的内容,记录和分享,也方 ...
- web性能优化-浏览器渲染原理
在web性能优化-浏览器工作原理中讲到,浏览器渲染是在renderer process中完成的. 那我们来看下renderer process究竟干了什么? Renderer Process包含的线程 ...
- 【Web开发】Mean web开发 01-Express实现MVC模式开发
简介 Mean是JavaScript的全栈开发框架.更多介绍 用Express实现MVC模式开发是Mean Web全栈开发中的一部分. Express 是一个基于 Node.js 平台的极简.灵活的 ...
- 高访问量WEB开发中的架构模式,学习从点滴开始
当一个Web系统从日访问量10万逐步增长到1000万,甚至超过1亿的过程中,Web系统承受的压力会越来越大,在这个过程中,我们会遇到很多的问题.为了解决这些性能压力带来问题,我们需要在Web系统架构 ...
- Web开发,浏览器通讯原理及流程那点事,你应该听说下
题外话: 最近园子里,关于.net门槛的文章风风火火,不过这类事情每过段时间就会出来一次,所以酱油都懒的打了. 当然个人也是有想法的,特别是这两天碰巧和一个三四年经验的java开发者呆在一起,对方说. ...
- web开发中浏览器跨域问题
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...
- document.compatMode简介
对于document.compatMode,很多朋友可能很少接触,知道他的存在却不清楚他的用途.今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的web页面 ...
随机推荐
- sax解析xml文件的DefaultHandler处理类
一千年的时光,我无数次掀起岁月的帷幔,只为和你,在某一个平静如水的日子相遇,然后相识,倾情一生,缱绻一世,好美的散文,好吧,我情愿把这个“你”当作android:),使用sax解析xml文件是我见到过 ...
- chrome安装插件,安装Postman
1.下载postman插件,可以自己到网上下载,也可以点击http://download.csdn.net/detail/u010246789/9528471 2.解压文件,在解压后的文件夹中找到.c ...
- FFT卷积相加模板
struct Complex { double r,i; Complex(double _r,double _i):r(_r),i(_i){} Complex(){} Complex operator ...
- D - Constructing Roads
D - Constructing Roads 思路:并查集板子 #include<cstdio> #include<cstring> #include<iostream& ...
- HDU 4343
二分加贪心,水过了.贪心是因为,不能存在覆盖,当存在覆盖时,留小坐标的. #include <iostream> #include <cstdio> #include < ...
- Bridge模式
Bridge模式 Bridge模式 在面向对象的开发过程中,要做到2点:1.高内聚(cohesion).2.松耦合(coupling).可是在实际开发过程中难以把握,比如会遇到这种问题: 1)客户给了 ...
- Qt on Android:资源文件系统qrc与assets
使用 Qt 为 Android 开发应用时,有时我们的应用会携带一些资源文件,如 png . jpg 等,也可能有一些配置文件,如 xml 等.这些文件放在哪里呢? 有两种方式: qrc assets ...
- maven+springMVC+mybatis 搭建过程
1.创建maven web 项目 maven 创建web应用命令: mvn archetype:generate -DgroupId=[com.rom]包名 -DartifactId=[cpsrom] ...
- QT 随笔
1. 设置窗体属性,无边框 | 置顶 setWindowFlags(Qt::FramelessWindowHint); setWindowFlags(Qt::FramelessWindowHin ...
- NSURLSession简介
NSURLSession是iOS7中新的网络接口,它与咱们熟悉的NSURLConnection是并列的.在程序在前台时,NSURLSession与NSURLConnection可以互为替代工作.注意, ...