html - 为什么 css 表中的非单元格 div 在 chrome 中具有非零宽度？

Question

这是 presentation of the issue .单击“content”方 block 可在 pre-content div 上切换 display: table-cell。在 IE10 和 FF24 中它根本不会使红线可见，而在 chrome 30 中它会。

我正在尝试在全窗口应用程序上创建可停靠面板，该面板要么漂浮在顶部，要么是两列之一，并且我通过切换类来停靠面板:任一具有 position: absolute ，其中一个带有 display: table-cell。

为什么会有这样的行为差异？有什么解决办法吗？

Answer 1

这似乎是由您的 #pre-content 分隔符默认显示为 block 引起的。出于某种原因，它有 11px 宽度(但是我不确定为什么)。

我不确定你想要达到什么目的，但你能不能简单地将其设置为默认情况下根本不显示？

#pre-content:not(.table-cell) {
    display: none;
}

JSFiddle demo .

请注意，我必须在这里使用 not() 选择器，因为 ID 比类具有更高的特异性，并且 #pre-content 会覆盖 .table-cell.