User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b7) Gecko/20100101 Firefox/4.0b7 Build Identifier: The vertical-align: baseline stops working for a box on which you have an overflow: hidden. To see what I am talking about, see the screenshots on: http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Firefox:-vertical-align:-baseline-s In the screenshot you see there, the box in question has a gray background. On Firefox, without the overflow: hidden, the text inside the gray box is at the same level as "Label:" but then looses its allignement when adding an overflow:hidden. Chrome/Safari doesn't have this problem. Reproducible: Always Steps to Reproduce: 1. Go to http://jsfiddle.net/avernet/PpTYU/ 2. In the "result" pane, see how the gray box is not baseline-aligned at the same level of "Label:".
Gecko (Firefox) is doing the correct thing here (as does Opera, btw). And Webkit is wrong. The key is your combination of overflow:hidden on an element with display:inline-block See http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align [quote] The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge. [/quote]
Status: UNCONFIRMED → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → INVALID
Verified. This is a known bug in Webkit's implementation of inline-block.
Status: RESOLVED → VERIFIED
Philippe, Boris: awesome, thank you for responding so quickly and for all the details. I am very glad to be wrong about this one.
@Boris: I couldn't find a bug for WebKit, so I created one: https://bugs.webkit.org/show_bug.cgi?id=53498 Please de-duplicate if you remember which known bug you are referring to.
You need to log in before you can comment on or make changes to this bug.