Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

firefox

The 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" set) should result in blocks positioned inline. That is, with:

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

those browsers will show:

Hello theresir

or

Hello there sir

However, Firefox (3 and up, I think) will give this:

Hello there
sir

That is, they make the "inline-block" element start on a new line. Now, that's clearly not what "inline-block" does without being combined with "position: absolute", nor is it what "position: absolute" does without "display: inline-block". Is this a bug, or just a bad (ambiguous) spec?

Here is a very simple jsfiddle.

(edit — maybe that is what Firefox does with "position: absolute" and no "display" setting ...)

like image 506
Pointy Avatar asked Jul 26 '11 23:07

Pointy


People also ask

How does display inline-block work affect?

The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.

What would be a reason to set an element to display inline-block?

An inline-block elements will respect a width . People used to¹ build column layout systems with inline-block , because it basically can do what floats could do here, except without the need to worry about clearing the float², allowing people to take advantage of wrapping which happens a bit more elegantly than float.

What does position absolute do in HTML?

An absolutely positioned element is an element whose computed position value is absolute or fixed . The top , right , bottom , and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.)

What does display inline-block do in HTML?

“display: inline-block” Property: This property is used to display an element as an inline-level block container. The element itself is formatted as an inline element, but it can apply height and width values. It is placed as an inline element (on the same line as adjacent content).


1 Answers

The right behavior here is not actually defined in the spec. The vertical position should be "as if the position were not absolute, sort of", basically. More precisely, this part of http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height is relevant:

But rather than actually calculating the dimensions of that hypothetical box, user agents are free to make a guess at its probable position.

That said, the Gecko code implementing this predates Gecko's implementation of inline-block, so only checks for original display being "inline". I filed https://bugzilla.mozilla.org/show_bug.cgi?id=674435 to look into changing this in Gecko.

like image 144
Boris Zbarsky Avatar answered Sep 20 '22 06:09

Boris Zbarsky