jQuery .css（“left”）在Chrome中返回“auto”而不是实际值

Question

我有div元素左侧和顶部定义，没有绝对位置，我想使用jQuery读取左侧和顶部值。

使用$("#MyId").css("left")在IE浏览器（IE8）中给出了预期的结果，但在Chrome中它返回了“auto”，尽管这些值是以元素样式显式写的。

以下是测试用例： http://jsfiddle.net/qCDkb/2/

请注意IE和Chrome之间的区别。

此外，这在jQuery 1.4.2中运行良好，在jQuery 1.4.3及更高版本中“失败”。

欢迎任何见解。 ： - ）

Answer 1

这是jQuery的奇怪行为。但是您可以使用本机javascript方法来获取css值：

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

此表达式将返回相应的css属性。

Answer 2

尝试$("your selector").position().top;

Answer 3

正如评论中所讨论的，将left设置为auto，position: static听起来有些正确，因为left在上下文中没有任何意义。

至于Chrome和IE返回不同值的原因：.css()提供了浏览器计算样式函数的统一网关，但它并没有统一浏览器实际计算样式的方式。浏览器以不同的方式决定这种边缘情况并不罕见。

至于为什么jQuery 1.4.2和1.4.3以不同的方式做到这一点，我不确定，但1.4.3's release notes中有这个：

  

几乎整个CSS模块都被重写，完全专注于可扩展性。您现在可以编写自定义CSS插件来扩展.css（）和.animate（）提供的功能。

Answer 4

添加

position: absolute;

或

position: relative;

到您在

上使用的元素

Answer 5

我知道这是一个老帖子，但我遇到了同样的问题，并认为我会提出几个解决方案。这个问题似乎不是Chrome特有的，因为我也可以在Firefox中重现。

我能够解决这两种方式中的一种。将CSS样式放在与HTML相同的文件中，而不是使用单独的CSS文件。或者，调用window.onload中的函数。看起来这些值在所有内容都已加载之前无法用于浏览器，如果样式位于外部样式表中。

希望这有用。