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

Question

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

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

这是现象的一个 fiddle :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;
}

如果您删除它绝对定位的事实，或者父元素是行内 block 的事实，问题就解决了。

Answer 1

当您为子 div (#content) 提供绝对定位时，您将其从文档流中移除，因此父 div (#container >) 折叠起来，因为它的行为就好像它不再包含任何东西，本质上具有零宽度或零高度。这会导致绝对定位的子 div (#content) 折叠。如果您删除规则并为父级提供 width:0 规则，您会看到类似的结果。

#container {
    width:0px;
}

jsFiddle example