Seven

demo：

https://bug491549.bugzilla.mozilla.org/attachment.cgi?id=375851

There is a css bug I encountered today which I want to share with you guy in case it happened to you one day.

When you have html structure like this: 

<div class=”parent”>

    <div class=”child”>

        text

    </div>

</div>

and you set child overflow: hidden and display: inline-block. You will find parent’s height is a little bit bigger than child’s. 

Fix

The way to fix this is simple.Just apply vertical-align： top to child and it will display as expect like case 4 in the demo.

Reason

Actually this is not a bug, I called it a bug just because it’s not most of us will expected. the css spec said that:

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.

So the reason is obvious now. Since we set overflow: hidden to child which makes the baseline of child being the bottom margin edge and expand parent.