offsetLeft、offsetTop浏览器兼容

2019-06-1870次阅读javascript

offsetLeft、offsetTop的offsetParent是偏移量的参考盒子,是元素的祖先元素中的某一个,不一定就是父元素。

IE8+中offsetLeft、offsetTop的表现

IE8+中offsetParent就是离自己最近的定位元素(relative,absolute,fixed),如果祖先元素都没有定位元素,那么这个元素的offsetParent就是body。注意IE8中计算出来的值是包含offsetParent的边框值。

IE8以下offsetLeft、offsetTop的表现

元素没有设置定位的时候,那么offsetParent就是一个离自己最近的,有定位的或者没有定位但是又高或宽的祖先元素(或者直接就是父元素)。

元素设置了定位(relative,absolute,fixed)的时候,那么offsetParent就是下一个定位元素(和IE8+下的表现一样)offsetParent。

按上面合理设置元素的定位不会用到计算偏移量,实在没有招了,可以考虑下面的方式计算偏移量:

function getElemenLeft(element){
    var actualLeft = element.offsetLeft;
    var current  = element.offsetParent;
    while(current != null){
        actualLeft += current.offsetLeft;
        current = current.offserParent;
    }
    return actualLeft;
}

如有需要你还可以js判断IE6、IE7浏览器的unshift方法来只在IE8以下中使用计算偏移量方法,免去还在IE8+上使用计算偏移量方法。

上一篇: js判断IE6、IE7浏览器的unshift方法  下一篇: JS压缩后IE低版本不兼容,试试把uglifyjs-webpack-plugin升级到2+  

offsetLeft、offsetTop浏览器兼容相关文章