element.offsetTop when parent has overflow and border

Question

FF and IE give differents offsetTop when a child is into a parent with overflow and border. FF substracts the top border size of the parent from offsetTop value, so return a negative value(often); I think IE return the correct value instead.

Test it

There is a crossbrowser way to get the same value?

Thank you.

Answer 1

The offsetTop property gives the position relative to the offset parent. The difference between Fx and IE is that they use different elements as offset parent in this case.

I don't know exactly how overflow affects this, and I haven't found anything about that in the definitions yet. However, there is a known bug in IE where it gets the offset parents wrong, and it may be a variation of that bug that you see here.

Answer 2

It appears to be a bug in firefox that has been open since 2005. The problem seems to be that there is no clear spec for offsetTop.

https://bugzilla.mozilla.org/show_bug.cgi?id=307502

Using getBoundingClientRect may work (it does for me).

var rect;
rect = el.getBoundingClientRect();
return rect.top;