javascript - 如果 div 高度为奇数，则将其舍入到最接近的偶数

Question

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

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演示模糊和修复