如果 div 的高度为奇数，则将其四舍五入到最接近的偶数答案

【问题标题】：Round div height to the nearest even number if it has an odd value如果 div 的高度为奇数，则将其四舍五入到最接近的偶数
【发布时间】：2015-05-19 19:44:12
【问题描述】：

基本上我想使用 transformY 但子像素模糊非常烦人，并且仅在 div 为奇数高度时才会发生。由于高度取决于文本视口等，因此需要它灵活，因此实际上需要它来获得 div 的高度 - 将其除以 2，四舍五入到最接近的数字，然后 x 2，因此它总是会产生一个偶数值。

【问题讨论】：

也许css的css3 calc函数可以帮到你。 developer.mozilla.org/en-US/docs/Web/CSS/calc
如果你是 JS 的话，看看Math。
你不能用CSS四舍五入，你可以用JS来做。
考虑过 calc 但你需要值才能开始，height: calc(auto / 2 * 2);或高度：计算（100% / 2 * 2）；不起作用。虽然不知道从哪里开始 js...

标签： javascript jquery html math

【解决方案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 演示模糊和修复

【讨论】：