为什么 jQuery 的 position() 和 offset() 方法在 Chrome 中返回小数？答案

【问题标题】：Why do jQuery's position() and offset() methods return fractional number in Chrome?为什么 jQuery 的 position() 和 offset() 方法在 Chrome 中返回小数？
【发布时间】：2012-06-24 10:45:07
【问题描述】：

我有一个简单的 div 标签，绝对定位在 HTML 文档中。在 Chrome 中，我将其“右”CSS 规则设置为以像素为单位的固定值，并将其“左”规则设置为“自动”，然后立即使用 jquery 的 position() 方法确定其左位置，返回的值是这样的：122.6363525390625。 offset() 方法也是如此。

另一方面，Firefox 没有这个问题。

你能告诉我为什么会发生这种情况以及是否有办法防止这种情况发生吗？提前致谢！

【问题讨论】：

你能设置一个小例子来演示这种行为吗？我无法在这里复制它：jsfiddle.net/Wjvak
尝试原生方法：getComputedStyle( yourElem ).getPropertyValue( 'left' )。如果它返回一个浮点数，那么这正是 Chrome 为您提供的，您必须手动将数字转换为整数。
请注意，这可能会导致 Telerik 控件出现问题feedback.telerik.com/Project/108/Feedback/Details/…

标签： jquery css google-chrome

【解决方案1】：

因为当您使用百分比宽度时，这就是数学的结果。想象一下你有这样的布局：

<div style="width: 111px">
    <div style="width: 50%"></div>
</div>

内部元素的宽度计算为 55.5 像素，而不是自然数。根据确切的 CSS 属性，这可以很容易地计算出更多的小数位。

Chrome uses subpixel rendering，这就是你看到这种行为的原因。

最后：我不知道为什么这会给你带来问题，但当然如果你想四舍五入到一个自然数你可以使用Math.round(x)。

【讨论】：

【解决方案2】：

在 Chrome 中，值被截断，因此 120、120.5 和 120.6 都显示相同的宽度，因此您无需担心使用十进制值。没有什么比 0.5 像素更好的了。像素是整个单位。如果您确实遇到函数返回十进制值的问题，那么为什么不使用 parseInt 呢？你不应该把这件事留给浏览器来处理，否则你的页面可能会损坏。

【讨论】：