783602 - different height for parent of inline-block element with overflow: hidden

Status: RESOLVED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[John Daniels]

Attachment: test.html

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.79 Safari/537.1

Steps to reproduce:

Created an inline-block element inside of a block element with overflow: hidden


Actual results:

depending on whether overflow: hidden, was set, the height of the containing block changed. Specifically, overflow: hidden on the inner block increases the height of the outer block. 

Open the attached file, and toggle overflow: hidden on the element with class "inner" to see the effect.


Expected results:

The height of the outer block should not be affected by the inner block being overflow: hidden. This is the case in the current build of Chrome.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Setting overflow:hidden on the inline-block changes the position of its baseline, which changes the height of the line box it sits on.  So the observed behavior is correct.

WebKit doesn't implement baselines on inline-block correctly, which is why you see a different behavior in Chrome.

See http://www.w3.org/TR/CSS21/visudet.html#line-height last paragraph on the page for the details.

You can, of course, use non-baseline alignment on the inner inline-block if you don't want its overflow value to affect the line box height.

Comment 2

[John Daniels]

Cool! Thanks!

Comment 3

[Boris Zbarsky [:bzbarsky]]

No problem. :)