我有一个相当复杂的布局问题,它只发生在 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 浏览器并将窗口大小大致调整为我的示例屏幕截图。它似乎发生在任意视口宽度上。