javascript - 为什么 getBoundingClientRect 在 IE 和 Firefox 中给出不同的值

Question

我有一个图像控件，我需要在图像控件顶部放置一些元素。当我使用 getBoundingClientRect() 时，它在 IE（7,8 和 9）中工作，但它在 Firefox 和 Chrome 中给出不同的值。是否有任何其他函数可用于获取元素的边界矩形？

Answer 1

来自旧 IE 文档的引用getBoundingClientRect：“在 Microsoft® Internet Explorer 5 中，相对于真正的客户端，窗口的左上角为 2,2（像素）。” 这似乎仍然有效。

在 IE9 中使用<meta http-equiv="x-ua-compatible" content="ie=edge"/>“设置”左上角到它的右侧位置 (0,0)。

正如 d4rkpr1nc3 回答的那样，您可以通过其他方法获取这些值，但结果也取决于使用的浏览器。我认为你需要一种稍微不同的方法来解决这个问题。检查下面的代码，它可能会给你一些想法。

<DIV id="imagecontrol" style="position:absolute;width:200px;height:200px;">
  <DIV id="topleft" style="position:absolute;width:100px;height:100px;left:0px;top:0px;"></DIV>
  <DIV id="topright" style="position:absolute;width:100px;height:100px;right:0px;top:0px;"></DIV>
  <DIV id="bottomleft" style="position:absolute;width:100px;height:100px;left:0px;bottom:0px;"></DIV>
  <DIV id="bottomright" style="position:absolute;width:100px;height:100px;right:0px;bottom:0px;"></DIV>
</DIV>

Answer 2

这些值在不同的浏览器中可能略有不同，但getBoundingClientRect()仍然是性能和准确性的最佳选择。但是，它返回的坐标是相对于视口而不是文档的，因此您需要使用窗口/文档上的滚动值来考虑这一点。

这是一篇很好的博客文章：

http://weblogs.asp.net/bleroy/archive/2008/01/29/getting-absolute-coordinates-from-a-dom-element.aspx

大卫马克在这方面很擅长。这是他来自comp.lang.javascript的提示：

https://groups.google.com/forum/?fromgroups#!topic/comp.lang.javascript/zWJaFM5gMIQ

Answer 3

您可以使用偏移量来做到这一点，如下所示：

var top = element.offsetTop;
var left = element.offsetLeft;
var width = element.offsetWidth;
var height = element.offsetHeight;
var bottom = top + height;
var right = left + width;