Question

在此jsfiddle中，我更改左侧的CSS附加＆＃34; px＆＃34;它：

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＆＃34; 37.0.2062.124 m＆＃34;。请注意，如果我省略＆＃34; px＆＃34;然后它一直工作。你有什么看法，这是一个错误吗？

Answer 1

我刚尝试过，即使是＆＃34; px＆＃34;删除后，输出日志是一样的;工具提示的宽度为155到0到0.5之间。

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

这绝对不是Chrome特有的东西，在Safari上展示了同样的行为;我认为，如果有的话，它是一个CSS或javascript＆＃39; bug，基于浮点数的解析方式。

编辑：Firefox的大小确实保持不变。

Answer 2

8月6日更新

此行为是故意的。来自Chrome团队：

这是故意的，因为我们将元素捕捉到像素网格。 offset *属性返回捕捉的值，因此取决于渲染的大小，以及扩展名，位置。
     另一方面，
element.getBoundingClientRect（）。width将始终返回“true”，未绑定的大小。

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

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

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

原帖，7月21日

我相信这是一个错误。我也在我的应用程序中使用工具提示体验过它。我向Chrome和Safari团队报告了这个问题：

手指交叉。

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

Chrome bug？更改左侧CSS会更改offsetWidth

2 个答案: