css - Webkit 计算元素的宽度错误，导致我的布局出现空白

Question

我有一个相当复杂的布局问题，它只发生在 Webkit 浏览器上。看看这个截图:



首先，请允许我解释一下我想在这里做什么。这种布局的目的是显示图像网格，每个网格单元都是正方形的。布局是响应式的，因此在另一个视口(viewport)宽度上，每行可能有 3 个图像而不是 2 个。

从技术上讲，标记是一个图形列表，每个图形内是一个链接，链接内是实际图像。伪标记:

<ul>
<li><figure><a href=""><img src="" width="0" height="0" /></a></figure></li>
<li><figure><a href=""><img src="" width="0" height="0" /></a></figure></li>
</ul>

如您所见，内部图像没有任何宽度。这是故意的，因为宽度是在我用作图像容器的 li 元素上设置的。在屏幕截图中的示例视口(viewport)中，li 元素的宽度设置为 50%。

接下来，在运行时，我将 img 元素全部隐藏起来，并将其 src 路径设置为“a”元素上的背景图像。这样做的目的是使图像正确居中，而不管图像的尺寸或纵横比如何。

主要注释:我在所有元素上使用 box-sizing:border-box 。

现在，在这个运行时例程中，我还动态计算“li”元素的高度，以强制它为正方形。让我们暂时假设示例屏幕截图的视口(viewport)宽度为 400 像素。由于所有“li”元素的宽度都设置为 50%，因此它们的宽度应为 200 像素。知道了这一点，我简单地将这个“li”元素的高度也设置为 200 像素，使其成为一个方形容器:

// applied to all "li"s in the list
$(this).height($(this).width());

除了 Webkit 浏览器(Chrome、Safari)之外，这在我测试的所有浏览器中都非常有效。当我在设置之前输出“a”(或 li)元素的宽度时，宽度和 CSS 宽度，非 webkit 浏览器将为每个“a”元素报告完全相同的宽度。当我在 webkit 浏览器中查看控制台时，它们的宽度存在差异。一个“a”元素可能是 200 像素，而另一个是 191 像素。实际值以及它是否发生取决于浏览器的视口(viewport)宽度，看起来如此。

无论哪种方式，结果都是您在屏幕截图中看到的丑陋差距。发生的情况是，由于 webkit 意外报告了这些“a”容器的不同宽度(尽管它们都设置为 50%)，高度也会有变化，从而导致间隙。

因此，最大的问题是:为什么 webkit 报告的“a”元素的宽度不正确且宽度不同，这些元素都设置为同一父级的 50%，而其他浏览器却没有？

迄今为止的理论

到目前为止，特此调查了几件事:

我在 li 元素上使用 inline-block ，这会导致额外的“空间”。我已经通过从标记中删除空格来解决这个问题。无论哪种方式，inline-block 都不是问题，因为当我将“li”元素更改为 float 时，webkit 浏览器在不应该显示不同宽度时仍然显示不同的宽度。

另一个理论与加载事物的顺序有关，其中一些声称将我的图像背景运行时例程延迟到 window.load 事件可能会有所帮助。不幸的是，结果完全一样。

我也知道 jQuery 中 .width() 和 .css("width") 之间的区别(我使用的是 1.8.2)。这没有什么区别，因为我在控制台上都输出了，而 Webkit 把这两个值都弄错了。

总结

抱歉解释太长，特此总结一下:我在列表元素上设置了 50%(或 33.3333%，取决于视口(viewport)宽度)的宽度，然后在运行时检索实际像素宽度。出于某种神秘的原因，webkit 浏览器会报告不同的宽度，尽管所有列表元素的百分比宽度都相同。

最后，这是该问题的实时链接:

[已删除，由于问题已解决并且现在更改了实时代码]

要重现此问题，您必须使用 webkit 浏览器并将窗口大小大致调整为我的示例屏幕截图。它似乎发生在任意视口(viewport)宽度上。

Answer 1

在我看来，它与视口(viewport)的像素宽度是否可被 2 或 3 整除有关。在宽度:50% 和 $(document).width()/2=0 的情况下没问题，但是当 $(document).width()/2=1 时，就会出现间隙。

因此，您可以计算一次并每次使用它，而不是计算每个高度，即将 imageLayout() 更改为:

var aHeight = $('.photos li figure > a')[0].width();
$('.photos li figure > a').each(function(index) {
    console.log('w: ' + $(this).width() + " css w: " + $(this).css("width"));
    console.log('pw: ' + $(this).parent().parent().width() + " css pw: " + $(this).parent().parent().css("width"));
    $(this).height(aHeight);


    if ($(this).attr('data-loaded') != "1") {
        var imgcaption = $(this).parent().find('figcaption a');
        imgcaption.html('<em class="icon-bolt"></em> loading...');
    }

});