为什么getBoundingClientRect在IE和Firefox中提供不同的值

Question

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

Answer 1

旧IE文档的引用getBoundingClientRect:"在Microsoft®InternetExplorer 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