css - Chrome 将宽度为 0 的表格单元格显示为 1px

Question

在 Firefox 中(我相信是正确的)，由于 width: 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 的最小宽度和高度。

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