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

Question

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

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

这是现象的一个小提琴：http: //jsfiddle.net/cnPAG/1/

HTML：

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

CSS：

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

如果您要么删除它是绝对定位的事实，要么删除父元素是 inline-block 的事实，问题就解决了。

Answer 1

当您为子 div ( #content) 提供绝对定位时，您会将其从文档流中删除，因此父 div ( #container) 会折叠，因为它的行为就像它不再包含任何内容一样，基本上具有零宽度或高度. 这会导致绝对定位的子 div ( #content) 折叠。如果您删除您的规则并给父母一个规则，您可以看到类似的结果width:0。

#container {
    width:0px;
}

jsFiddle 示例