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,从而说明了这一点,必要的情况下可以做一下兼容处理。

getBoundingClientRect()浏览器兼容问题简单介绍

回复

我来回复
  • 暂无回复内容