【javascript】标准模式与怪异模式下CSS以及JS的区别

标准模式与怪异模式下CSS的区别

见这篇文章《【css】怪异模式下的盒模型》

http://www.cnblogs.com/sniper007/archive/2012/12/03/2799571.html 

 

标准模式与怪异模式下JS的区别

 document.compatMode属性可以判断是否是标准模式，当 document.compatMode为“CSS1Compat”，是标准模式，“BackCompat”是怪异模式。

区别主要体现在两方面：

一、获取当前视口大小

在IE，firefox,safari,opera,chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight保存的是页面视口的信息。

在IE6中，这些属性必须在标准模式下才生效，在怪异模式下，通过document.body.clientWidth和document.body.clientHeight获取，对于混杂模式的chrome，通过document.body,document.documentElement获取的大小是一样的

 兼容代码如下：

 1 function getViewport(){
 2     var doc = document,
 3         docElem = doc.documentElement,
 4         body = doc.body;
 5     return document.compatMode === "CSS1Compat" ? {
 6         width : docElem.clientWidth,
 7         height : docElem.clientHeight
 8     } : {
 9         width : body.clientWidth,
10         height : body.clientHeight
11     };
12 }

 

 二、获取文档的总高度

scrollWidth,scrollHeight用于确定元素内容的实际大小。通常认为html元素是在web浏览器的视口中滚动的元素（IE6之前版本运行在怪异模式下时是body）。因此

垂直滚动条的页面总高度总是document.documentElement.scrollHeight。

对于不滚动的页面而言，scrollWidth和scrollHeight与clientWidth和clientHeight之间的关系很含糊。在这种情况下，基于document.documentElement查看这些属性

会在不同浏览器之间发现不一致的问题，如下：

1、firefox中两组属性始终是相等的，但大小代表的是文档内容区域的实际尺寸，而非视口的尺寸。

2、opera,safari3.1以及更高的版本、chrome中的两组属性有差别，其中，scrollWidth,scrollHeight等于视口大小，而clientWidth、clientHeight等于文档内容区域的大小。

3、IE标准模式下，其中，scrollWidth,scrollHeight等于文档内容区域的大小，而clientWidth、clientHeight等于视口大小。

因此在确定文档的总高度时候，必须取得scrollHeight/scrollWidth 与clientHeight/clientWidth，怪异模式下，将document.documentElement换成body

兼容代码如下：

 function getScrollHeight(){
2     var doc = document,
3         docElem = doc.documentElement,
4         body = doc.body;
5     return {
6         width : Math.max(docElem.scrollWidth, docElem.clientWidth, body.scrollWidth, body.clientWidth),
7         height : Math.max(docElem.scrollHeight, docElem.clientHeight, body.scrollHeight, body.clientHeight)
8     };
9 }

 

 参考文档：

《javascript高级程序设计》第三版 12.2.3 “元素大小”