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

RESOLVED INVALID

Status

()

RESOLVED INVALID
6 years ago
6 years ago

People

(Reporter: john, Unassigned)

Tracking

14 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

6 years ago
Created attachment 652820 [details]
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.
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → INVALID
(Reporter)

Comment 2

6 years ago
Cool! Thanks!
No problem. :)
You need to log in before you can comment on or make changes to this bug.