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

Question

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

首先,请允许我解释一下我在这里要做的事情.此布局的目的是显示图像网格,每个网格单元格为正方形.布局是响应式的,因此在另一个视口宽度上,每行可能有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元素上设置的,我将其用作图像容器.在屏幕截图中显示的示例视口中,li元素的宽度设置为50%.

接下来,在运行时,我将img元素全部隐藏起来并将其src路径设置为"a"元素上的背景图像.无论图像的尺寸或纵横比如何,这样做的目的都是使图像正确居中.

主要说明:我在所有元素上使用box-sizing:border-box.

现在,在此运行时例程中,我还动态计算"li"元素的高度,以便将其强制为方形.让我们假设示例屏幕截图的视口宽度为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"元素可能是200px而另一个是191px.实际值以及它是否完全取决于浏览器的视口宽度.

无论哪种方式,结果都是您在屏幕截图中看到的难看的差距.发生的事情是,由于webkit意外地报告了这些"a"容器的不同宽度(虽然它们都设置为50%),但高度也会有变化,导致间隙.

因此,最大的问题是:为什么webkit报告的"a"元素的错误和不同宽度都设置为同一父级的50%,而其他浏览器则没有？

理论到目前为止

到目前为止,调查了一些事情:

我在li元素上使用了内联块,这已知会导致额外的"空间".我通过从标记中删除空格来解决这个问题.无论哪种方式,内联块都不是问题,因为当我将"li"元素更改为float时,webkit浏览器仍然会显示不同的宽度.

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

我也知道jQuery中的.width()和.css("width")之间的区别(我使用的是1.8.2).它没有什么区别,因为我在控制台输出两者,而Webkit的两个值都是错误的.

总结

很抱歉这么长的解释,特此摘要:我在列表元素上设置了50%(或33.3333%,取决于视口宽度)的宽度,然后在运行时检索实际的像素宽度.出于一些神秘的原因,webkit浏览器会报告不同的宽度,尽管所有列表元素都具有相同的百分比宽度.

最后,这是一个问题的实时链接:

[已删除,由于问题已解决且现场代码已更改]

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

Answer 1

在我看来,它与视口的像素宽度是否可以被2或3整除有关.在宽度:50%和$(文档).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...');
    }

});