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

问题描述

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

解决方案

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

在IE9中使用< meta http-equiv =x-ua-compatiblecontent =ie =边缘/> 将左上角设置为正确的位置（0,0）。

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

 < DIV id =imagecontrolstyle =position：absolute ;宽度：200像素;高度：200像素;> 
< DIV id =topleftstyle =position：absolute; width：100px; height：100px; left：0px; top：0px;>< / DIV> 
< DIV id =toprightstyle =position：absolute; width：100px; height：100px; right：0px; top：0px;>< / DIV> 
< DIV id =bottomleftstyle =position：absolute; width：100px; height：100px; left：0px; bottom：0px;>< / DIV> 
< DIV id =bottomrightstyle =position：absolute; width：100px; height：100px; right：0px; bottom：0px;>< / DIV> 
< / DIV> 
  

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 ?

解决方案

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.

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).

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.

<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>

这篇关于为什么getBoundingClientRect在IE和Firefox中给出不同的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！