Combining "display: inline-block" with "position: absolute": what should happen?

IE and WebKit browsers seem to agree that “position: absolute” when applied to “display: inline-block” (or, in the case of IE7, simple “inline” elements with “hasLayout”) should result in blocks located in line. That is, using:

Hello there <label style='position: absolute; display: inline-block'>sir</label> 

these browsers will show:

 Hello theresir 

or

 Hello there sir 

However, Firefox (3 and above, I think) will give the following:

 Hello there sir 

That is, they force the "inline block" element to start on a new line. Now this is clearly not what "inline-block" does without being combined with "position: absolute", and this does not mean that "position: absolute" does without "display: inline-block". Is it a mistake, or just a bad (ambiguous) specification?

Here is a very simple jsfiddle.

(edit - maybe what Firefox does with "position: absolute" and no "display") ...

+8
css firefox
source share
1 answer

The correct behavior is not defined here in the specification. The vertical position should be “as if the position was not absolute, sort of,” basically. More precisely, this part of http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height matters:

But instead of actually sizing this hypothetical box, user agents are free to guess their likely position.

However, the Gecko code that implements this precedes the implementation of the Gecko built-in block, so it only checks that the original display is "built-in." I wrote down https://bugzilla.mozilla.org/show_bug.cgi?id=674435 to learn this at Gecko.

+4
source share

All Articles