Javascript 为什么 getBoundingClientRect 在 IE 和 Firefox 中给出不同的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10230715/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
why getBoundingClientRect gives different values in IE and Firefox
提问by Senan
I have an Image control and I need to place some elements on top of the image control. when I used getBoundingClientRect() it is working in IE(7,8 and 9) but It is giving different values in Firefox and Chrome. Is there any other function available for getting the Bounding rectangle of an element ?
我有一个图像控件，我需要在图像控件的顶部放置一些元素。当我使用 getBoundingClientRect() 时，它在 IE（7,8 和 9）中工作，但它在 Firefox 和 Chrome 中给出了不同的值。是否有其他函数可用于获取元素的边界矩形？
回答by Teemu
Citation from old IE documentation for getBoundingClientRect: "In Microsoft? Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client." This still seems to be valid.
来自旧 IE 文档的引用getBoundingClientRect：“在 Microsoft? Internet Explorer 5 中，相对于真实客户端，窗口的左上角位于 2,2（像素）处。” 这似乎仍然有效。
In IE9 usage of <meta http-equiv="x-ua-compatible" content="ie=edge"/>"sets" the upper-left corner to it's right position (0,0).
在 IE9 中使用<meta http-equiv="x-ua-compatible" content="ie=edge"/>“设置”左上角到它的正确位置 (0,0)。
As d4rkpr1nc3 answered, you can get those values by other methods, but the results depend on the used browser too. I think you'll need a slightly different approach to this problem. Check the code below, it might give you some ideas.
正如 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>
回答by Tim Down
The values maybe slightly different in different browsers but getBoundingClientRect()is still your best bet for performance and accuracy. The coordinates it returns are relative to the viewport rather than the document, however, so you'll need to account for that using scroll values on the window / document.
这些值在不同浏览器中可能略有不同，但getBoundingClientRect()仍然是性能和准确性的最佳选择。然而，它返回的坐标是相对于视口而不是文档的，因此您需要使用窗口/文档上的滚动值来考虑这一点。
Here's a good blog post about this:
这是一篇关于此的很好的博客文章：
David Mark is good on this stuff. Here's a tip of his from comp.lang.javascript:
大卫马克擅长这些东西。这是他来自comp.lang.javascript的提示：
https://groups.google.com/forum/?fromgroups#!topic/comp.lang.javascript/zWJaFM5gMIQ
https://groups.google.com/forum/?fromgroups#!topic/comp.lang.javascript/zWJaFM5gMIQ
回答by d4rkpr1nc3
You could use offsets to do that, like this:
您可以使用偏移量来做到这一点，如下所示：
var top = element.offsetTop;
var left = element.offsetLeft;
var width = element.offsetWidth;
var height = element.offsetHeight;
var bottom = top + height;
var right = left + width;
