Webkit ignores vertical-align for inline-blocks containing line-boxes

Question

When Webkit (Safari, Chrome) encounters an inline-block where...

1. the line-height height is specified
2. the content is rendered using multiple line-boxes

...the inline-block element ignores the specified vertical-align.

To help illustrate the problem, I have a small test case: http://arther.net/lab/webkit-vertical-align-test.html#test

---

Firefox 3.6, Opera 10.53, and IE7+ treat these inline-blocks like inline elements, and vertical align works as expected. Webkit browsers (and Opera 10.10) treat the inline-blocks in this situation like block-level elements, thus ignoring vertical-align. So, who is right, and who is buggy?

I can see this going either way. On one hand, you can say that all inline elements — even inline-blocks — should position themselves properly within the containing line-box as per vertical-align. On the other hand, inline elements usually define a single inline-box and don't have line-boxes of their own. Anything wrapping multiple line-boxes should be a block-level element. In that case, the inline-block should be treated as a block, which would thus ignore vertical-align.

Given the current behavior, I figure that one of the following is true:

• this is a Webkit bug
• this is a bug in all other rendering engines
• the spec is vague about handling this particular situation, and different approaches are being taken

If anyone could provide some clarification on the issue and what the expected behavior should be, I would greatly appreciate it.

Answer 1

This looks like a bug, since it works when the section takes only one line.

Chrome and Safari has a function where you can Report bugs to help their developers fix it.