Chrome有bug吗？改变左侧CSS会改变offsetWidth吗？

Question

Chrome有bug吗？改变左侧CSS会改变offsetWidth吗？

3

在这个jsfiddle中，我通过添加“px”来改变左侧CSS：

function changeLeft(leftVal) {
    var left = parseFloat(leftVal);
   //tooltip.style.left=left;
   tooltip.style.left=left + "px"; 
    log("left: " + left + ", width: " + tooltip.offsetWidth);
}

以下数值如下：

changeLeft(0.1);
changeLeft(0.2);
changeLeft(0.3);
changeLeft(0.4);
changeLeft(0.5);
changeLeft(0.6);
changeLeft(0.7);
changeLeft(0.8);
changeLeft(0.9);

您将在输出中找到以下日志：

left: 0.1, width: 155
left: 0.2, width: 155
left: 0.3, width: 155
left: 0.4, width: 155
left: 0.5, width: 154
left: 0.6, width: 154
left: 0.7, width: 154
left: 0.8, width: 154
left: 0.9, width: 154

因此，正如您可以在某个时刻之后看到的那样，Chrome开始更改offsetWidth。我现在使用的是最新版本的Chrome“37.0.2062.124 m”。请注意，如果我省略“px”，则它会始终正常工作。您认为这是一个错误吗？

- SBel

2个回答

1

更新，8月6日

这种行为是有意的。来自Chrome团队的说法：

这是有意为之的，因为我们将元素捕捉到像素网格中。offset*属性返回已捕捉的值，并且因此依赖于渲染大小，以及位置。

另一方面，element.getBoundingClientRect().width将始终返回“真实”的未捕捉大小。

https://code.google.com/p/chromium/issues/detail?id=512307#c5

在您的示例中，该元素宽度为154.4375px。将其左侧位置设置为.1px会使其占用超过第155个像素的一半，因此它会捕捉到155的offsetWidth。

很遗憾Chome和Safari与Firefox和IE的行为不同，但我可以理解两种方法。

原始帖子，7月21日

我认为这是一个错误。我的应用程序中的工具提示也遇到了这个问题。我向Chrome和Safari团队报告了这个问题：

祈求好运。

我以你的演示为例，希望你不介意。

- Chad von Nau

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pandorym · Accepted Answer

我刚试了一下，即使将“px”去掉，输出日志仍然相同；在0和0.5之间，工具提示的宽度为155。

对于所有其他大小，直到工具提示框到达右侧，宽度为154。

这绝对不是Chrome特有的问题，在Safari上表现相同；我认为，如果有什么问题，那就是CSS或JavaScript“bug”，基于浮动解析的方式。

编辑：在Firefox上，大小确实保持不变。