Chrome显示的表格单元格的0宽度为1px [英] Chrome displaying table-cell with 0 width as 1px

问题描述

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

In Firefox (correctly, I believe), no red div is seen due to width: 0 but in Chrome, it is displayed as having 1px width. This seems like an issue with recent versions of Chrome. This fiddle shows the issue.

代码是：

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

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

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

Does anyone know why this happens or a workaround?

推荐答案

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

Chrome (and other webkit-based browsers) will only allow a table cell to have zero size if it has no content, no background, and no borders. Add any one of those things, and you get the 1px minimum width and height.

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

In this particular case, you might be able to work around the bug by setting overflow: hidden on the container div and then shifting the table-cell div left 1px via relative positioning. Firefox ignores relative positioning on table cells, so it shouldn't be affected. Don't know about IE, etc.. The downside is that, if any content does ever get added to the table-cell div, its left edge will be cut off by 1px.

这篇关于Chrome显示的表格单元格的0宽度为1px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！