getBoundingClientRect()浏览器兼容问题简单介绍
分类：实例代码
关于此方法的基本用法可以参阅js getBoundingClientRect()方法一章节。
但是此方法还是有一定的浏览器兼容性问题，但是也不是关键，因为只有IE7和IE7以下浏览器才会有此问题。
在标准浏览器中，参考点坐标是(2,2)，但是在标准浏览器汇总，参考点坐标是（0,0）。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
*{
margin:0px;
padding:0px;
}
#box{
width:200px;
height:150px;
background:#ccc;
position:absolute;
left:100px;
top:200px;
text-align:center;
line-height:150px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("box");
odiv.innerHTML=odiv.getBoundingClientRect().top;
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
上面的代码在IE8和IE8以上或者其他标准浏览器中，显示结果为200.
但是在IE7和IE7以下浏览器中显示的值是202，从而说明了这一点，必要的情况下可以做一下兼容处理。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu