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

【问题标题】：Table and Table-cell working differently in Chrome and Firefox表格和表格单元在 Chrome 和 Firefox 中的工作方式不同
【发布时间】：2015-08-07 16:55:58
【问题描述】：

我正在开发this 网站。

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

在网站的页脚，您会看到 8 个完美契合的徽标。如果您使用 Mozilla Firefox 打开它，徽标列表会超出网站容器。

下面是两张图片-

铬： 1

火狐：

徽标在 ul 中作为列表项

CSS 是这样的

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

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

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

【问题讨论】：

您可以声明这不是兼容性问题，因为display table rule on caniuse 在几乎每个浏览器的每个版本中都显示了对该属性的完美解释。
没错，但是为什么会出现这种不一致呢？

标签： css google-chrome firefox

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

制作表格布局：固定

.clients ul{
 table-layout: fixed
}

【讨论】：

【解决方案3】：

如果你想要一行中的所有八个标志，你可以给它们一个固定的宽度12.5%

否则设置

.img-responsive{
display: block;
width: 100%;
/*max-width: 100%;*/
height: auto;
}

【讨论】：

我想要容器内的所有 8 个徽标
实际上 chrome 解决了这个问题，但我相信正确的行为是 FF 的