Question

See this example.

CODE:

alert( "slide-panel2 position: " + $('#slide-panel2').css("left") )

CSS:

#slide-panel2 { left: 0px; }

Why do WebKit browsers alert css left position value as auto when the actual value is set to 0px?

In Firefox and IE it alerts 0px as expected.

EDITED:

As Alex Stated in his answer below (And I am agree with him):

Because your element has position: static (by default), so it will ignore the left property in regard to its layout. The browser only cares about left (and its friends) if your position property is set to absolute, relative or fixed.

Changing it to position: relative gives the expected result.

But according to this reference:

The position CSS property has default value static

And in static The top, right, bottom, and left properties do not apply.

Then why does the alert show 0px in Firefox and IE and auto in WebKit browsers?

Answer 1

Because your element has position: static (by default), so it will ignore the left property in regard to its layout. The browser only cares about left (and its friends) if your position property is set to absolute, relative or fixed.

Changing it to position: relative gives the expected result.

jsFiddle.

Then why alert shows 0px in Mozilla and IE and auto in WebKit browsers?

Because browsers have different implementations which don’t necessarily agree. Even the browsers that show 0px still treat it like it’s auto.