getBoundingClientRect()瀏覽器相容問題簡單介紹

admin發表於2017-04-06
GCclient瀏覽器

關於此方法的基本用法可以參閱js getBoundingClientRect()方法一章節。

但是此方法還是有一定的瀏覽器相容性問題，但是也不是關鍵，因為只有IE7和IE7以下瀏覽器才會有此問題。

在標準瀏覽器中，參考點座標是(2,2)，但是在標準瀏覽器彙總，參考點座標是（0,0）。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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，從而說明了這一點，必要的情況下可以做一下相容處理。

相關文章