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...');
    }

});

Answer 2

您是否检查过li或ul元素在webkit broswers中是否具有默认边距？尝试将样式表顶部的所有ul或li设置为0px以获得边距和填充。

li { margin:0px; padding:0px;} ul{ margin:0px; padding:0px}

Answer 3

之前我遇到过这个问题，浏览器计算肯定有问题。

示例：http://jsfiddle.net/gSWkd/2/

（Firefox：罚款/ Chrome：前2记录112，其他记录111）

也许抓住第一张图片的宽度/高度并适用于其他人？

像这样：http://jsfiddle.net/gSWkd/4/

HTML：

<div class="why">
    <div class="heresWhy red"></div>
    <div class="heresWhy blue"></div>
    <div class="heresWhy red"></div>
    <div class="heresWhy blue"></div>
    <div class="heresWhy red"></div>
    <div class="heresWhy blue"></div>
    <div class="heresWhy red"></div>
    <div class="heresWhy blue"></div>
    <div class="heresWhy red"></div>
    <div class="heresWhy blue"></div>
</div>

CSS

.why {
    width: 223px;
    height: 223px;
}
.heresWhy {
    width: 50%;
    height: 50%;
    float: left;
}
.heresWhy.red {
    background: red;
}
.heresWhy.blue {
    background: blue;
}

JS

// Apply 50% W/H to the first image
$('.why div:first-child').width('50%');
$('.why div:first-child').height('50%');

// Get W/H from the first image
var rightSize = $('.why div:first-child').width() - 1;

// Apply W/H to other images
$('.why div').each(function(){
    $(this).width(rightSize);
    $(this).height(rightSize);
});

// Check W/H
$('.why div').each(function(){
  $(this).html($(this).width()); // Show div width
  $(this).html($(this).height()); // Show div width3
})