表格和表格单元在Chrome和Firefox

Question

我正在this网站上工作。

如果您在 Chrome 上打开它，则会按预期显示所有内容。

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

以下是2张图片 -

Chrome： 1

Firefox：

徽标位于ul作为列表项

内

，CSS就像这样

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

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

我该如何解决这个问题？

Answer 1

make table-layout：fixed

.clients ul{
 table-layout: fixed
}

Answer 2

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

表确保所有内容都是可见的，因此如果它不能缩小或包装其内容，那么它会扩展100％。 Chrome表示图像可以缩小并调整表格宽度，而Firefox则使用图像的全宽来计算表格的宽度。

几乎具有讽刺意味的是，在图片上设置width: 100%会使Firefox的行为与Chrome一样。

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

Answer 3

如果您想要该行中的所有八个徽标，您可以为它们提供固定宽度12.5%

否则设置

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