Bug 39306 - vertical-align is ignored for inline-blocks containing line-boxes
: vertical-align is ignored for inline-blocks containing line-boxes
Product: WebKit
Classification: Unclassified
Component: CSS
: 528+ (Nightly build)
: Macintosh Intel Mac OS X 10.6
: P2 Normal
Assigned To: Nobody
Depends on:
  Show dependency treegraph
Reported: 2010-05-18 12:08 PDT by sean-webkit
Modified: 2010-12-03 14:36 PST (History)
1 user (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description sean-webkit 2010-05-18 12:08:38 PDT
When Webkit encounters an inline-block where...

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

...the inline-block element ignores the specified vertical-align.  I've linked to my test case to help illustrate the problem.

To Reproduce:

   1. Create a block-level element
   2. Create a inline-block element as a child of the block created in Step 1.
   3. Set the `vertical-align` of the inline-block to "middle"
   4. Fill the inline-block with enough content so that the inline-box for that content extends horizontally beyond bounds of the containing block-level element
   5. Set the `line-height` of the inline-block.  Use a value smaller than the `line-height` value of the containing block.

Actual Results:

   The vertical-align property of the inline-block is ignored.

Expected Results:

   The inline-block treats `vertical-align` in the same manner as other inline elements

Tested on 2010-05-18 in Mac OS 10.6 using Safari 4.0.5 (6531.22.7) and Google Chrome 5.0.375.38 beta
Comment 1 drew 2010-12-03 14:36:27 PST
just ran into this bug, and can confirm that it does happen as described. ironically, adding a single non-breaking space as a sibling to the inline-block item will correct this behavior.