为什么jQuery的.css('left')和.position().left返回不同的值？

Question

我获取 $(el).css('left') 和 $(el).position().left 的值不同？如果我执行 $(el).css('left', '100px')，那么 $(el).css('left') 返回的是 110px 而不是 100px（始终多10%），而且如果我评估 $(el).position().left，它会给我100。为什么Chrome会这样做？你可以看到这会影响使用 left 属性的jQuery动画。我在Ubuntu上使用的是Chrome 21.0.1180.57。编辑1：似乎只影响Chrome，FF 14.0.1给我相同的值。

- Gaurav Dadhania

Answer 1

left 返回CSS left属性的计算值。

position().left 返回相对于元素的第一个偏移父元素的 x 坐标。

这些值可以相等，也可以不相等。

position().left 由于渲染方式的差异在不同浏览器之间也很容易存在差异，而 .css("left") 只能因单位不同而有所区别，如果有的话。

- Esailija

---

除了.css("left")没有做到这一点！http://i.imgur.com/auymh.png 在Chrome浏览器中，.position().left给出的是CSS left属性值。 - Gaurav Dadhania

@GauravDadhania，你能给我展示一下那个jsfiddle吗？在截图中，它们有不同的值。一个是1145，另一个是1040。 - Esailija

嗯，我尝试重新创建它，但标记/样式太复杂了。然而，最终将 div.jspDrag 的 position 从 relative 更改为 absolute 就解决了！现在当我使用 .css("left") 时，我得到了实际的 left 属性。你知道为什么 position: relative 是罪魁祸首吗？ - Gaurav Dadhania

@GauravDadhania 当元素被绝对定位时，style.left 应该等于 position().left，因为该元素已经脱离文档流，除了其偏移父级和 .style.left 之外，没有其他东西会影响其定位。当元素受到文档流的影响时，有更多的因素会影响其在文档中的最终位置，正如我在我的 jsfiddles 中所展示的那样。 - Esailija

我明白你的意思，但无论如何，.css("left")都应该返回CSS left属性值。正如您在屏幕截图中看到的那样，当元素相对定位时，.css("left")返回的是不同的值。根据您的JSFiddles，.position().left应该受到影响，而.css("left")应始终返回CSS属性值。 - Gaurav Dadhania

Answer 2

请尝试以下代码：

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

- Gabriel Silveira