jQuery .css("left") returns "auto" instead of actual value in Chrome

I have div element with left and top defined, without absolute position, and I want to read the left and top values using jQuery.

Using $("#MyId").css("left") gave the expected result in IE browser (IE8) but in Chrome it returned "auto" instead, although the values are explicitly written in the element style.

Here is the test case: http://jsfiddle.net/qCDkb/2/

Note the difference between IE and Chrome.

Also, this is working well in jQuery 1.4.2 and "failing" in jQuery 1.4.3 and above.

Any insights are welcome. :-)

Solution 1:

Try $("your selector").position().top;

Solution 2:

It is strange behavior for jQuery. But you can use native javascript methods to get css values:

$("#Panel1")[0].style.left

This expression will return corresponding css property.

Solution 3:

As discussed in the comments, setting left to auto for a position: static sounds somehow right, seeing as left has no meaning in the context.

As to why Chrome and IE return different values: .css() provides a unified gateway to the browsers' computed style functions, but it doesn't unify the way the browsers actually compute the style. It's not uncommon for browsers to decide such edge cases differently.

As to why jQuery 1.4.2 and 1.4.3 do this differently, I do not know for sure, but there's this in 1.4.3's release notes:

Nearly the entire CSS module has been rewritten focusing entirely on extensibility. You can now write custom CSS plugins that extend the functionality provided by .css() and .animate().