Combining "display: inline-block" with "position: absolute": what should happen?
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 star开发者_开发百科t 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 ...)
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.
精彩评论