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

【问题标题】：Why does jQuery only return integer height if setting a double value clearly renders differently?如果设置双精度值明显不同，为什么jQuery只返回整数高度？
【发布时间】：2013-08-14 10:45:45
【问题描述】：

我有一个高度为 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 在高度/宽度的双重值上表现得很好吗？为什么这么反对？

【问题讨论】：

浏览器四舍五入像素，没有半个像素。
你希望如何在屏幕上显示半个像素？
@elclanrs 好吧，这不是 100% 清楚的，尤其是。在“视网膜”显示上，但我同意它可能是浏览器进行舍入而不是 jQuery。
这不是你可以用 jQuery 或 JavaScript 做的事情，一个像素要么是这种颜色，要么是那种颜色，不能同时...
当您使用浏览器工具检查元素时，元素的高度是什么意思？只是好奇，因为它不应该是 10.5

标签： javascript jquery height pixel

【解决方案1】：

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

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

【讨论】：

是的，很公平，它可能只是在 10 到 11 之间四舍五入。