Chrome displaying table-cell with 0 width as 1px

问题

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.

The code is:

<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?

回答1:

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.

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.

来源：https://stackoverflow.com/questions/24331082/chrome-displaying-table-cell-with-0-width-as-1px