在某些 window 宽度处偏移 1 个像素

Question

我在 Safari 和 Firefox 中使用以下 JSFiddle 遇到了一个非常有趣的故障：

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

我有两个左浮动相对定位的 li 元素，宽度为 32% 加上 1% 右边距。然后，我在 li 元素上放置了一个 div 元素，该元素位于 absolute 和 top/left 0 之上。 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 的大小来检查像素错误：

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

如果您使用 .innerWidth() 而不是 getBoundingClientRect()，您将看到您所陈述的错误。

在某些 window 宽度处偏移 1 个像素

1 pixel offset at certain window widths

html

javascript

css

jquery

width