javascript 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;
}

赞 (0)

相关推荐

  • javascript document.compatMode兼容性

    IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode.所以为兼容性考虑,我们可能需要获取当前的文档渲染方式. document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat. BackCompat:标准兼容模式关闭.浏览

  • document.compatMode介绍

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

  • document.compatMode的CSS1compat使用介绍

    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 ? d

  • javascript中setAttribute兼容性用法分析

    本文实例分析了javascript中setAttribute兼容性用法.分享给大家供大家参考,具体如下: 1:常规属性建议使用 node.XXXX. 2:自定义属性建议使用node.getAttribute("XXXX"). 3:当获取的目标是JS里的关键字时建议使用node.getAttribute("XXX"),如label中的for. 4:当获取的目标是保留字,如:class,请使用className代替. setAttribute(string name,

  • JavaScript的setAttribute兼容性问题解决方法

    复制代码 代码如下: var asubmit = document.getElementById("submit"); 复制代码 代码如下: <span style="white-space:pre"> </span>asubmit.setAttribute("onclick","alert('请检查手机号码');"); //在火狐中有效,而在ie中无效 复制代码 代码如下: <span styl

  • javascript document.referrer 用法

    举例: 1. a.html文件内容如下: <a href="b.html">浏览b.html </a> 2. b.html文件中的内容如下: <body> <script type="text/javascript"> document.write(document.referrer); </script> </body> 3. 则在通过a.html中的超链接访问b.html的时候,显示的结果是

  • Javascript 多浏览器兼容性问题及解决方案

    CSS 多浏览器兼容性问题及解决方案一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统

  • css与javascript跨浏览器兼容性总结

    本文以大量实例形式总结了css与javascript跨浏览器的兼容性问题.分享给大家供大家参考.具体总结如下: 一.CSS样式兼容性 1. FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因.如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV.解决办法: 1) 给父DIV也设上float 2) 在

  • Javascript document.referrer判断访客来源网址

    Javascript document.referrer判断访客来源网址

    今天遇到一个蛮有趣的问题,由于公司与一些厂商有合作关係,因此双方的网站中也都会交换连结,当今天合约也终止后,但对方始终一直没把连结的部分下掉时,这有时会产生一些不必要的误会,让一般的使用者认为双方还有合作关係,固然说这样子可赚到一些流量,但相对的也造成了一些误解,因此上头则希望能否去判断使用从它站连来时,就把它拒绝在门外,这让梅干退了三步,原本以为要从主机来作设定,上网找了一些文件后,才发现只要用简单几行的javascript,就可抓到使用的来源,以及作出一些防范的措施.效果图: 复制代码 代码

  • 关于javascript document.createDocumentFragment()

    他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild. 也支持以下DOM2屬性: attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ow

随机推荐