如果一个div的高度是奇数，将其四舍五入为最接近的偶数。

Question

我想使用transformY，但子像素模糊非常令人困扰，只有在div高度为奇数时才会出现。由于高度取决于文本视口等因素，因此需要灵活处理，因此实际上需要获取div的高度-将其除以2，四舍五入到最近的数字，然后x 2，这样始终会产生一个偶数值。

- MichaelAlmond

---

可能CSS的CSS3 calc函数能够帮到您。https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc - albanx

如果你对JS感兴趣，可以参考Math。 - lshettyl

你不能使用CSS进行四舍五入，但可以使用JS实现。 - somethinghere

虽然考虑过使用calc函数，但是你需要一个初始值，例如height: calc(auto / 2 * 2); 或者 height: calc(100% / 2 * 2); 都不起作用。对于JavaScript，我一点头绪都没有从哪里开始... - MichaelAlmond

Answer 1

这个问题虽然有点老，但在谷歌搜索“将div高度舍入为偶数”的结果中是第一个答案，所以可能会对其他人有帮助。

您已经完美地识别了问题：由于结果没有舍入到最近的像素，因此翻译可能会导致模糊，因此将div高度舍入为偶数可以解决这个问题。

我们无法在CSS中实现这一点，因为它还不知道其最终高度，因此我们必须在渲染后进行操作。使用Jquery非常简单：

最初的回答

$(window).on("load", function() {
    $('div').each(function (index, value) {
        if($(this).height()%2==1) $(this).height( 2*Math.round($(this).height()/2 ) ) ;
    });
});

当然，同样可以在VanillaJS中完成，只需多写几行代码。 解释

• $(window).on("load")事件在这里很重要，因为最终高度将在最终呈现之后知道，包括图像尺寸，在DOM加载时仍然未知。

• height %2 ==1使用模运算符检查除以2的余数 ->奇数

• 然后，如您所说，使用2*(round(height/2))将其四舍五入到最近的（上）偶数像素

jsFiddle演示了模糊和修复。

- arno