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 回答