Skip to content Skip to sidebar Skip to footer
Home / Html

Display:inline-block And Overflow:hidden Leading To Different Vertical Alignment

Post a Comment
The following code renders differently in different browsers (IE = FF = higher than baseline, Chrome = on baseline). Whose fault is it? Where should I file a bug report? Do you kn

Solution 1:

Yes. You need to do these:

  1. Remove the style overflow: hidden;. This is not needed here. You need this only when you give a width or text-overflow: ellipsis;.

  2. Add vertical-align: bottom;. The vertical alignment of the text will change when the display is changed from inline to inline-block.


Solution 2:

It seems Chrome is in error. The CSS 2.1 spec says

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.

Since the overflow property computes to something other than 'visible' the inline-block's baseline is the bottom margin edge, which sits on the baseline of the containing line box, and therefore must raise up the contained text to allow space for the descenders of that text.


Solution 3:

Try This

<!doctype html>
<html>
<head>
    <style>
        .a {
            display: inline; 
            overflow: hidden;
            color: red;
        }
    </style>
</head>
<body>
    baseline__<div class="a">test</div>__baseline
</body>
</html>

Post a Comment for "Display:inline-block And Overflow:hidden Leading To Different Vertical Alignment"