Question

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 ?

Answer 1

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>