xhtml不支持document.body.scrollTop
当为html文档加上如下头以支持xhtml过渡标准时候，使用document.body.scrollTop值始终为0
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh-CN” lang=”zh-CN”>
这是document.body.scrollTop始终为0,这时需要用document.documentElement.scrollTop才能获得正确的值，而如果不加xhtml的申明,必须用document.body.scrollTop获得其值，此时document.documentElement.scrollTop将为0
下面这个getScrollXY()方法可以包装这个变化
<script type=”text/javascript” >
???? function getScrollXY()
{
????????? var x,y;
????????? if(document.body.scrollTop)
{
??????????????? x=document.body.scrollLeft;
??????????????? y=document.body.scrollTop;
?????????? }
????????? else
{
??????????????? x=document.documentElement.scrollLeft;
??????????????? y=document.documentElement.scrollTop;
?????????? }
????????? return {x:x,y:y};
???? }
??? function onClick()
{
document.getElementById(“disp1“).value=getScrollXY().x;
document.getElementById(“disp2“).value=getScrollXY().y;
}
</script>
以上这是兼容的写法，没有考虑是否写了XHTML声明。如果要知道此文档是否写了XHTML声明需要用到document.compatMode，我们都知道，IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。 document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下：
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
当文档有了标准声明时，document.compatMode 的值就等于 "CSS1compat"，否则就是BackCompat, 因此，我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
?
///检测当前文档是否写了XHTML声明
function IeTrueBody()
{
???? if (document.compatMode && document.compatMode != "BackCompat")
???????? return document.documentElement;
???? else
???????? return document.body;
}
///再返回滚动条的位置信息；
function GetScrollTop(){
?return ie ? IeTrueBody().scrollTop : window.pageYOffset;
}
在IE和FireFox下scrollTop都可以用，但在IE下不能用pageYOffset，此属性在FireFox下有效，也就是说如果在FireFox下获得滚动条垂直位置，用scrollTop和pageYOffset均可以.所以为了兼容IE和FireFox最好都用scrollTop。
不仅仅scrollTop是这样，其他还有一些属性也是这样用的
document.documentElement.clientHeight : document.body.clientHeight; 如果没有声明XHML头的话document. documentElement.clientHeight在IE中是0，但在FireFox中也是一个数值，但不准，为了能最大程序的兼容，都要判断一下为好。
其他有关窗口的属性
window.screenLeft和window.screenTop是IE中判断视口位置，在其他浏览器中是undefined，document.body.offsetWidth和document.body.offsetHeight是IE中获取视口大小的属性，在FireFox中会出现奇怪的值，并且此值不随窗口的大小而变动，此值在IE中包括状态栏的高度，document.body.clientHeight和document.body.clientWidth也显示视口的大小，但不包括状态栏的高度和滚动条的宽度,更重要的是此属性在FireFox中同样有效。
在非IE浏览器中，window.screenX和window.screenY表示视口位置，window.innerWidth和window.innerHeight表示视口大小。Window.outerWidth和window.outerHeight表示整个浏览器的大小，奇怪的是此值有可能比屏幕的宽度还要大。这些值在IE中均是undefined。
综上所述：我们可知：
IE专用属性：
window.screenLeft和window.screenTop 判断视口位置
document.body.offsetWidth和document.body.offsetHeight 获取视口大小
其他浏览器
window.screenX和window.screenY获取视口位置<可能为负>
window.innerWidth和window.innerHeight获取视口大小
Window.outerWidth和window.outerHeight获取整个浏览器的大小,包括状态栏和上面的菜单等杂七杂八的东西的高度。
共有的属性：
document.body.clientHeight和document.body.clientWidth显示视口的大小，但不包括状态栏的高度和滚动条的宽度.
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/liuyongshuai/archive/2010/04/08/5463567.aspx