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 上设置溢出：隐藏然后通过相对定位将表格单元格 div 向左移动 1px 来解决该错误。 Firefox 会忽略表格单元格上的相对定位，因此它不应该受到影响。不知道 IE 等。缺点是，如果任何内容确实被添加到 table-cell div，它的左边缘将被切断 1px。