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的代码:
view source
print?
01 if (document.compatMode == "BackCompat") {
02 cWidth = document.body.clientWidth;
03 cHeight = document.body.clientHeight;
04 sWidth = document.body.scrollWidth;
05 sHeight = document.body.scrollHeight;
06 sLeft = document.body.scrollLeft;
07 sTop = document.body.scrollTop;
08 }
09 else { //document.compatMode == "CSS1Compat"
10 cWidth = document.documentElement.clientWidth;
11 cHeight = document.documentElement.clientHeight;
12 sWidth = document.documentElement.scrollWidth;
13 sHeight = document.documentElement.scrollHeight;
14 sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
15 sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
16 }
参考网址:http://hi.baidu.com/%C9%AE_%CC%C6/blog/item/a323a9df5a67c45d95ee3701.html
更多阅读:http://www.css88.com/archives/90,http://www.css88.com/archives/149
分享到:
相关推荐
JavaScript中的`document.compatMode`属性是用来检测浏览器当前的渲染模式,这对于处理跨浏览器的兼容性问题至关重要。在网页开发中,浏览器对HTML文档的解析方式有两种:Quirks Mode(怪异模式)和Standards Mode...
`document.compatMode` 是一个在JavaScript中用于检测网页渲染模式的属性,对于开发跨浏览器兼容性的Web应用至关重要。它的存在主要是因为不同的浏览器,尤其是Internet Explorer(IE),在处理页面布局和盒模型时...
在火狐浏览器中,通常情况下`document.body.scrollTop`和`document.documentElement.scrollTop`返回相同的值,因为火狐遵循了W3C的标准,即在文档完全加载后,这两个属性应该反映页面的实际滚动位置。 #### 谷歌...
不过,`document.compatMode` 可以帮助我们判断当前文档是处于标准模式(CSS1Compat)还是怪异模式(BackCompat)。根据这个属性,我们可以编写兼容性代码: ```javascript if (document.compatMode === ...
否则,如果`document.compatMode`不存在或者为"BackCompat"(quirks模式),则使用`document.body.clientWidth`和`document.body.clientHeight`获取窗口大小。 另外,获取窗口在屏幕上的位置也有类似的问题。`...
本文档旨在总结JavaScript中DOM(Document Object Model)节点API的基本用法及其在实际开发中的应用。通过深入理解这些API,开发者能够更加灵活地操控网页文档结构,实现动态内容更新、用户交互等功能。 #### 文档...
然而,在遵循Web标准的XHTML页面中,`document.body.scrollTop` 属性可能由于文档类型定义(DTD)的影响而始终返回0,这导致无法准确获取页面的实际滚动位置。 #### 解决方案:兼容性处理 为了解决这一问题,开发...
- `document.documentElement.scrollLeft` 和 `document.documentElement.scrollTop` 在某些情况下也可以用于获取滚动量,尤其是在文档模式为`CSS1Compat`的情况下。 - `document.body.scrollLeft` 和 `document....
} else if (document.compatMode === "BackCompat") { width = document.body.clientWidth; height = document.body.clientHeight; } else { width = document.documentElement.clientWidth; height = ...
本文档主要介绍如何利用JavaScript结合CSS样式实现楼层导航效果。这种效果广泛应用于大型网站或页面较长的网站中,以提高用户体验,让用户能够快速跳转到页面中的指定部分。 #### 二、CSS样式设置 在开始编写...
2. **选择正确的body或documentElement对象**:由于IE在标准模式和怪异模式下使用的对象不同,因此需要根据`document.compatMode`来决定使用哪个对象。 3. **获取滚动条位置**:对于IE浏览器,使用`IeTrueBody()....
在这个例子中,表达式检查当前文档的兼容模式(`document.compatMode`),如果模式是`CSS1Compat`(表示标准模式),它会基于`documentElement`(HTML根元素)进行计算;否则,它会基于`document.body`进行计算。...
- **document.compatMode**: 该属性用来判断文档处于何种渲染模式。如果值为 "CSS1Compat",表示文档处于标准兼容模式;如果为 "BackCompat",则处于怪异模式。 - **document.documentElement.clientHeight**: 标准...
9. 浏览器兼容性:浏览器的兼容性是一个重要的问题,需要考虑不同浏览器的差异,例如使用 `document.compatMode` 来判断浏览器的兼容性模式。 本文档涵盖了前端工程师笔试面试题的多个技术领域,包括 HTML、CSS、...
2. **文档模式检测**:判断当前页面是在“怪异模式”下显示还是在“标准模式”下显示。 ```javascript var E = (document.compatMode == "BackCompat"); ``` #### DOM元素操作函数 1. **获取元素**:通过ID获取...
开发者可以通过document.compatMode属性来检测当前页面的渲染模式。 DOCTYPE的正确使用对于确保页面在不同浏览器中的渲染一致性至关重要。最常见的是XHTML 1.0 Transitional和HTML5的DOCTYPE声明。例如: ```html ...
在Vue.js应用中,有时我们需要实现锚点定位或者在用户操作后调整页面滚动位置,但可能会遇到一个问题:尝试使用`document.body.scrollTop`设置滚动条位置时,发现它总是不起作用,值始终保持为0。这个问题主要源于...
4. **document.compatMode**:返回文档的渲染模式,区分怪癖模式(BackCompat)和标准模式(CSS1Compat)。在处理IE8及其之前的版本时,可能需要结合`document.documentMode`来判断具体的渲染模式。 5. **document....