Chrome(webkit) 和 Firefox 的 jQuery 定位差异答案

【问题标题】：jQuery positioning differences between Chrome(webkit) and FirefoxChrome(webkit) 和 Firefox 的 jQuery 定位差异
【发布时间】：2015-01-06 16:56:18
【问题描述】：

在处理 jQuery UI 范围滑块时，我主要在 chrome 中进行调试。我需要使范围有一个限制，所以我会像这样抓住其中一个手柄的左侧位置：

$el.css('left');

这会给我以百分比形式的左侧位置：84%。但是，当我在 Firefox 中进行测试时，它以像素为单位返回值。

以前有人经历过吗？基于查看 Firebug 中的 DOM，Firefox 确实识别基于百分比的左侧定位，但它似乎没有将其作为值返回。这是 Firefox 的默认行为吗？ IE中也是这样吗？

【问题讨论】：

好问题。当属性被指定为百分比（或 ems）时，我最近很惊讶地发现 css('left') 在 Firefox 中返回像素。毕竟，您始终可以使用 position().left 获取像素值。不过，还没有在 Chrome 中检查过。
是的，当我认为我基本上完成了该功能时，其中一个元素刚刚从屏幕上射出，我感到很惊讶。在没有 VMWare 或类似设备的 MBP 上工作，所以现在无法真正测试 IE。
这不能回答您的问题，但基于 jQuery 的解决方法是使用 position (api.jquery.com/position)，它在每个浏览器上返回相同的值（以像素为单位）。
@Emmett，我正在这样做，但由于 position 值被截断（如，没有十进制值），jQuery UI 范围滑块句柄有时会“跳跃”，造成尴尬经验。看起来这就是实现的方式，直到有人另有说明。
如果这里没有找到解决方案，请考虑在 jQuery 网站上提交错误报告。我的第一个猜测是它返回内部存储的值，即像素。但正如你所说，它仍然会在萤火虫中显示百分比......你可能想检查萤火虫中的计算选项卡。除此之外，我没有想法，可以看到这可能是一个错误。

标签： jquery webkit positioning

【解决方案1】：

改用$el.position().left; :)

【讨论】：

如果你不走运，它可以返回相同的结果。（目前对我来说）

【解决方案2】：

我认为从最新版本 1.4.4 开始，与 jQuery 的定位没有任何已知差异。

【讨论】：

【解决方案3】：

我以前用过一个插件：http://plugins.jquery.com/project/dimensions

【讨论】：

【解决方案4】：

css() 函数返回浏览器报告的指定 css 属性的值。因此，它是特定于浏览器的，不应在以这种方式处理长度和定位时使用。

【讨论】：

我同意，css() 函数允许您操作或读取 css 属性，并且（遗憾的是）每个浏览器对这些属性的解释不同。如果您想要独立于浏览器的图形和结果，请使用 position() 函数。

【解决方案5】：

我通过直接访问 DOM 解决了这个问题，如下所示：

$el.get(0).style.left

它返回 FF、Chrome、Safari 和 IE9 的 % 值。（虽然没有在 Opera 上测试过）

【讨论】：