Menu
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 ...)
506
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.
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.
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.)
“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).
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.
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
