javascript - 如果设置 double 值明显不同，为什么 jQuery 只返回整数高度？

Question

我有一张高度为 924 像素的图片。该图像已创建为适合此高度。拉伸(stretch)它是不可取的。

在此图像之上，我需要叠加可变数量的相同高度的 div 元素。在这个特定的例子中，我需要覆盖 88。因此，数学很清楚:

924 / 88 = 10.5

每个 div 元素的高度必须为 10.5 像素才能正确覆盖我的图像。

在视觉上，一切看起来都很棒!我有 88 个元素，它们的高度均为 10.5 像素。如果我将它们的高度设置为 11px 或 10px，我会看到视觉上的差异。

但是，使用 jQuery:

$('div').height();  // 10
$('div').css('height'); //10px

??嗯？它们的高度显然是 10.5 像素，而不是 10。如果我深入了解元素的样式属性——我会看到 10.5 像素。

这是怎么回事？我可以让 jQuery 很好地处理高度/宽度的双值吗？为什么如此反对？

Answer 1

使用 jquery.height() 实际上将其转换为它在屏幕上占用的实际像素数量。

您可能会发现，如果您遍历页面上的每个 div 都是 10 和 11 的混合高度，因为您不能只在半个像素上渲染某些东西，要实际渲染需要半个像素的东西，您需要决定是否需要一个像素。浏览器将在 div 执行和不执行之间交替，以尝试获得最佳结果。