火狐兼容getBoundingClientRect问题

最近开发中遇到这么个兼容大问题，项目比较复杂，所以我将问题核心抽离出来。
如下：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test Range bug of fireFox</title>
<!-- <link type="text/css" rel="stylesheet" href="css/basic.css"></link> -->
<style>
.textTransform{
font:18px Simsun,arial,sans-serif;
display:block;
position:absolute;
}
.textSpanOne{
-webkit-transform: translate(31px, 4px);
-moz-transform:translate(31px, 4px);
transform:translate(31px, 4px);
}
.textSpanTwo{
-webkit-transform: translate(50px, 6px);
-moz-transform:translate(50px, 6px);
transform:translate(50px, 6px);
}
.textSpanThree{
-webkit-transform: translate(90px, 10px);
-moz-transform:translate(90px, 10px);
transform:translate(90px, 10px);
}
.textSpanFour{
-webkit-transform: translate(130px, 12px);
-moz-transform:translate(130px, 12px);
transform:translate(130px, 12px);
}
.textSpanFive{
-webkit-transform: translate(170px, 16px);
-moz-transform:translate(170px, 16px);
transform:translate(170px, 16px);
}
</style> <script>
window.onload = function(){
//fireFox bug
var span_doms = document.getElementsByTagName('span');
for(var i = 0; i < span_doms.length; i++){
var textNode = span_doms[i].childNodes[0];//获取文本对象
var range = document.createRange();
range.setStart(textNode, 0);
range.setEnd(textNode, 0 + textNode.length);
var boundTest = range.getBoundingClientRect();//只有火狐浏览器获取的值异常
console.log(boundTest);
}
}
</script>
</head><body>
<h1>FireFox Range Bug </h1>
<span class="textTransform textSpanOne">这</span>
<span class="textTransform textSpanTwo">只是</span>
<span class="textTransform textSpanThree">一个</span>
<span class="textTransform textSpanFour">测试</span>
<span class="textTransform textSpanFive">文本</span>
</body>
</html>
以上代码在chrome opera safri 中console.log输出的值虽略有不同但基本相似，唯独在火狐中遍历获得的每个文本对象“right”“bottom”相同。截图如下
请问大虾们怎么破？兼容火狐range

解决方案 »

  1.   

    直接用
    var boundTest = span_doms[i].getBoundingClientRect();
      

  2.   

    谷歌过相关资料：
    要获得“TextRectangles ”有一个与“getBoundingClientRect”类似的方法：getClientRects ，修改成以下后：//var boundTest = range.getBoundingClientRect();//只有火狐浏览器获取的值异常
    var boundTest = range.getClientRects()[0];//还是火狐有问题啊火狐的输出值还是一样。
      

  3.   

    这样是破了我这个精简版的bug了，但我项目中的问题方法复用率很高如果使用父类“parentNode”其他功能就会出事。所以请问有没有保持调用“range”对象的基础上修复这个bug。
      

  4.   

    这样是破了我这个精简版的bug了，但我项目中的问题方法复用率很高如果使用父类“parentNode”其他功能就会出事。所以请问有没有保持调用“range”对象的基础上修复这个bug。

    看下这样能不能解决你要求 window.onload = function(){
    //fireFox bug
    var span_doms = document.getElementsByTagName('span');
    for(var i = 0; i < span_doms.length; i++){
    var textNode = span_doms[i].childNodes[0];//获取文本对象
    var range = document.createRange();
     
      range.setStart(textNode, 0);
      range.setEnd(textNode, 0 + textNode.length);
     
    var boundTest = range.getBoundingClientRect();//只有火狐浏览器获取的值异常
     


    var r1=range.startContainer.parentNode.getBoundingClientRect();
    var r2=range.endContainer.parentNode.getBoundingClientRect();
    var r={
    left:r1.left,top:r1.top,
    right:r2.right,bottom:r2.bottom,
    width:r2.right-r1.left,height:r2.bottom-r1.top
    }
     
    console.log(r);
    }

    }
      

  5.   

    终于解决，LS的方法只是换汤不换药而已。目前的解决方案是用if 首先对火狐浏览器判断 然后进行多项逻辑判断，针对对问题所在dom进行处理。
    让其他功能不调用“return parentNode.getBoundingClientRect()”,经多次调试没发现新问题。