由于不同浏览器内核不同，对代码解析可能不一致，所以出现兼容问题。
在chrome浏览器中，当给<div>盒子设置了transform: scale()缩放样式后，通过offsetTop获取该div盒子中某元素（<p>）到浏览器顶部高度时，不能获取到实际高度，得到的实际是（<p>）元素到<div>之间的高度。
但在Safari浏览器中，盒子设置transform: scale()缩放样式，通过offsetTop获取某一元素到浏览器顶部高度不会存在差别化，都能得到实际到浏览器文档顶部的实际高度。
如：当不给div设置transform: scale()缩放样式时：
html:
<body>
<div>
<p id="pH">获取到顶部高度高度</p>
</div>
<div>
css:
body{
padding-top:300px;
}
div{
padding-top:150px;
}
js:
console.log(document.getElementById("pH").offsetTop); //在chrome和Safari打印结果都为 450
当不给div设置transform: scale()缩放样式时：
html:
<body>
<div>
<p id="pH">获取到顶部高度高度</p>
</div>
<div>
css:
body{
padding-top:300px;
}
div{
padding-top:150px;
transform: scale(1); //设置了缩放样式
}
js:
console.log(document.getElementById("pH").offsetTop); //在chrome打印为150，在Safari打印结果都为450
但一般使用到transform: scale()都是给某元素设置动画，要解决这个获取offsetTop的问题，可以用以下方式处理。以背景图为例：
可以通过background的系列属性，设置初始盒子动画样式，不使用transform.scale(1)，因为transform.scale(1)设置的就是原始缩放； 动画结束阶段，再添加transform.scale()样式。 这样在执行transform.scale()之前都可以拿到元素到文档顶部的高度，执行后也没有必要拿元素高度了（一般都是滚动条滚动到可视区域，执行动画）。
如果执行后还需要高度，可以尝试使用元素盒子之间距离加减计算得到。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66308.html
