Question

在Firefox中（正确地说，我相信），由于宽度：0而没有看到红色div，但在Chrome中，它显示为宽度为1px。对于最新版本的Chrome，这似乎是一个问题。 This fiddle显示了这个问题。

代码是：

<div id="wrapper">
    <div></div>
</div>

#wrapper {
    background: yellow;
    height: 100px;
    width: 100px;
}
#wrapper div {
    display: table-cell;
    height: 100px;
    width: 0px;
    background: red;
}

有谁知道为什么会发生这种情况或解决方法？

Answer 1

Chrome（以及其他基于webkit的浏览器）只允许表格单元格没有内容，没有背景，没有边框时，其大小为零。添加其中任何一个，你得到1px的最小宽度和高度。

在这种特殊情况下，您可以通过设置overflow：隐藏在容器div上然后通过相对定位将table-cell div左移1px来解决这个问题。 Firefox忽略了表格单元格的相对位置，因此不应受到影响。不知道IE等等。缺点是，如果有任何内容被添加到table-cell div，它的左边缘将被1px切断。

Chrome显示表格单元格，0宽度为1px

1 个答案: