在某些窗口宽度处有1个像素偏移

Question

我在Safari和Firefox中都遇到了一个非常有趣的故障，其中包含以下JSFiddle：

http://jsfiddle.net/68gcy2gp/

您必须单击红色框才能切换蓝色叠加层。

我有两个左浮动的相对定位li元素，宽度为32%加1%右边距。然后，我将div元素放在absolute上，其中上/左0位于li元素上。此div的宽度将设置为32％li具有的相同宽度（通过jQuery）。

在某些屏幕宽度上，我得到1px毛刺（太长或太短）。就像这个截图显示的那样：

如何防止这种故障？

Answer 1

好的，作为正式答案：

jQuery .width（）或.innerWidth（）使用floor或ceil将子像素的宽度四舍五入到下一个整数值，具体取决于值。为了避免这种情况，你可以使用一些原始的javascript：

$('.person').each(function() {
    var front = $(this).find('.front');
    var back = $(this).find('.back');
    var link = $('<a href="#"></a>');

    link.on('click', function() {
        var width = $(front)[0].getBoundingClientRect().width;
        back.innerWidth(width);
        back.toggle();
    });

    $(this).wrap(link);
    back.hide();
});

以下函数用于通过使用活动叠加层调整窗口大小来检查像素错误：

$(window).resize(function() {
    $('li').each(function() {
        var back = $(this).find('.back');
        var width = $(this)[0].getBoundingClientRect().width;
        back.width(width);    
    });
});

如果你使用.innerWidth（）而不是getBoundingClientRect（），你会看到你所说的错误。