Question

基本上我想使用transformY但是亚像素模糊非常烦人，只有当div是奇数高度时才会出现。由于高度取决于文本视口等，需要它是灵活的，所以现实地需要它来获得div的高度 - 将它除以2，舍入到最接近的数字然后x 2，因此它总是产生偶数值。

Answer 1

这个问题很旧，但这是google上第一个将“将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演示模糊和修复

如果div具有奇数值，则将div高度舍入为最接近的偶数

1 个答案: