获取元素在文档上的正确坐标

　　如何获取元素在页面上的正确坐标呢， 我想很多人都会想到  elem.getBoundingClientRect 和 window.scrollTop / window.scrollLeft 的求和，实际上这种方法在大部分情况下的确是正确的， 但是在 ie6 ie7 中却并不正确， top 和 left 会比实际的值各多出 2px。

　　这个2px 并不是 html 和 body 的 默认 border 造成的， 这是浏览器的容器边框宽度。

　　就是下图中红框部分

　　

　　这个值如何去获得呢?

　　先在 css reset 中 加入 html{ margin: 0} /* 兼容各浏览器的 html margin 呈现不统一 */

　　然后，可以使用 (document.documentElement || document.getElementsByTagName('html')[0]).getBoundingClientRect() 去获得

　　不过, 经过测试，代码在 ie 67 下可以获得 2 这个值，  ie6 为 0,  ie7 为2, 而 ie 8 却是 -2， 其他浏览器均为 0

　　看来 ms 在 ie7除了 html 外加上 2， 在ie8 的时候 getBoundingClientRect 函数是通过内置 -2 的值的方式来修复的， 而 ie9 才真正修复了

 

　　因此，这里还需要对该函数做 ie8 的兼容，加上部分其他问题的兼容，于是有了以下代码

//元素在文档上的坐标 v0.4 Alucelx
//http://www.cnblogs.com/Alucelx/archive/2011/12/11/2284082.html
function pageXY(elem){
	var rect = elem.getBoundingClientRect();
	var scrollTop = window.scrollTop || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop || 0;
	var scrollLeft = window.scrollLeft || (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft || 0;

	var html = document.documentElement || document.getElementsByTagName('html')[0];

	//修复ie 7 下的浏览器边框也被算在 boundingClientRect 内的 bug
	var deviation = html.getBoundingClientRect();
	//修复 ie8 返回 -2 的 bug
	deviation = { //FF 不允许修改返回的对象
		left:	deviation.left < 0 ? 0 : deviation.left,
		top:	deviation.top < 0 ? 0 : deviation.top
	};

	return {
		left:	rect.left + scrollLeft - deviation.left,
		top:	rect.top + scrollTop - deviation.top
	};
}

 使用时，传入要查询的元素 即可返回正确的位置