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

Question

我有一个高度为 924 像素的图像。已创建图像以在此高度下看起来合适。拉伸它是不可取的。

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

924 / 88 = 10.5

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

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

但是，使用 jQuery：

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

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

这是怎么回事？我可以让 jQuery 在高度/宽度的双重值上表现得很好吗？为何如此反对？

Answer 1

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

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