html - 为什么css表中的not-cell div在chrome中具有非零宽度？

Question

这是问题的介绍。单击“内容”方块会display: table-cell在pre-contentdiv 上切换。在 IE10 和 FF24 中，它根本不会使红线可见，而在 chrome 30 中则可以。

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

为什么行为上有如此大的差异？任何想法如何解决这一问题？

Answer 1

这似乎是由于您的#pre-content分隔线默认显示为块引起的。由于某种原因，它的宽度为 11px（但是我不确定为什么）。

我不确定你想要实现什么，但你能不能简单地将它设置为默认不显示？

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

JSFiddle 演示。

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