3

我有一个相当复杂的布局问题，它只发生在 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”元素可能是 200 像素，而另一个是 191 像素。实际值以及它是否发生取决于浏览器的视口宽度，看起来如此。

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

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

到目前为止的理论

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

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

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

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

总结

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

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

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

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

4

3 回答 3

6

在我看来，它与视口的像素宽度是否可被 2 或 3 整除有关。如果 width: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...');
    }

});
于 2013-01-28T22:23:12.180 回答
1

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

li { margin:0px; padding:0px;} ul{ margin:0px; padding:0px}
于 2013-01-28T22:23:17.777 回答
1

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

示例：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
})
于 2013-01-28T22:54:21.300 回答