Question

我注意到Chrome / FF / IE上出现了一些奇怪的行为，并且想知道是否有人知道为什么HTML / CSS会以这种方式呈现。

如果您有一个绝对定位的子div，其父级的显示设置为inline-block，则子div中的任何空格都将被视为换行符。即使子元素设置为contenteditable =“true”也是如此（当您尝试键入空格时，它会导致换行）。

HTML：

<div id="container">
    <div id="content">Hello, World!</div>
</div>

CSS：

#container {
    display: inline-block;
    position: relative;
}
#content {
    position: absolute;
}

如果要么删除绝对定位的事实，要么删除父元素是内联块的事实，问题就解决了。

Answer 1

当您给子div（#content）提供绝对定位时，您将其从文档流中删除，因此父div（#container）会崩溃，因为它表现为如果它不再包含任何东西，基本上没有宽度或高度。这会导致绝对定位的子div（#content）崩溃。如果删除规则并为父级提供width:0规则，则可以看到类似的结果。

#container {
    width:0px;
}

<强> jsFiddle example

具有内联块父节的绝对定位子Div的行为

1 个答案: