css - 表格和表格单元格在 Chrome 和 Firefox 中的工作方式不同

Question

我正在研究 this网站。

如果您在 Chrome 上打开它，一切都会按预期显示。

在网站的页脚，您将看到 8 个非常合适的 Logo 。 如果您使用 Mozilla Firefox 打开它， Logo 列表会超出网站容器。

下面是2张图片-

Chrome : 1

火狐:

Logo 在 ul 中作为列表项

CSS 是这样的

.clients ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    display: table;
}

.clients ul li {
    display: table-cell;
}

我应该如何解决这个问题？

Answer 1

这实际上是在表格内部计算图像宽度的不同之处，而不是表格元素本身。

表格确保所有内容都是可见的，因此如果它不能收缩或包裹其内容，那么它会扩展超过 100%。 Chrome 发现图像可以缩小并随后调整表格宽度，而 Firefox 使用图像的全宽来计算表格的宽度。

几乎具有讽刺意味的是，在图像上设置 width: 100% 将强制 Firefox 以与 Chrome 相同的方式运行。

编辑:作为脚注，您的“表格”结构并不完全正确。在这种特殊情况下，它似乎不会导致任何布局问题，但您应该确保始终拥有正确的 table > tbody > tr > td 层次结构，以防止出现奇怪的行为。