I've noticed some weird behavior on Chrome/FF/IE, and was wondering if anybody knew why HTML/CSS gets rendered in this way.

If you have an absolutely positioned child div, whose parent's display is set to inline-block, any white space in the child div is treated as a line break. This is true even if the child element is set to contenteditable="true" (when you try to type spaces, it causes a line break).

Here is a fiddle of the phenomenon: 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;
}

If you either remove the fact that it is absolutely positioned, or the fact that the parent element is inline-block, the problem is fixed.

Edit
Report