为什么 webkit 浏览器在值设置为“0px”时将 css 左侧位置值警报为“auto”

Question

看到这个example。

代码：

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

CSS：

#slide-panel2 { left: 0px; }

当实际值设置为0px时，为什么WebKit浏览器会将css left position值提示为auto？

在 Firefox 和 IE 中，它会按预期提示 0px。

已编辑：

正如 Alex 在下面的answer 中所述（我同意他的观点）：

因为你的元素有 position: static （默认），所以它会忽略它的布局的 left 属性。如果您的位置属性设置为绝对、相对或固定，浏览器只会关心 left（及其朋友）。

将其更改为 position: relative 会得到预期的结果。

但是根据this reference：

position CSS 属性的默认值为 static

而在static 中，top、right、bottom 和 left 属性不适用。

那为什么警报在 Firefox 和 IE 中显示 0px 而在 WebKit 浏览器中显示 auto？

Answer 1

因为你的元素有position: static（默认），所以它会忽略left关于它的布局的属性。如果您的position 属性设置为absolute、relative 或fixed，浏览器只关心left（及其朋友）。

将其更改为 position: relative 会得到预期的结果。

jsFiddle.

那么为什么在 Mozilla 和 IE 中 alert 显示 0px 而在 WebKit 浏览器中显示 auto？

因为浏览器有不同的实现，不一定一致。即便是显示0px 的浏览器仍然将其视为auto。