Menu
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 know a way how to get this solved cross-browser. If I change vertical-alignment, I get it to work in some browsers, but not the others.
<!doctype html>
<html>
<head>
<style>
.a {
display: inline-block;
overflow: hidden;
color: red;
}
</style>
</head>
<body>
baseline__<div class="a">test</div>__baseline
</body>
</html>
http://jsfiddle.net/T2vQj/
650
Yes. You need to do these:
Remove the style overflow: hidden;. This is not needed here. You need this only when you give a width or text-overflow: ellipsis;.
Add vertical-align: bottom;. The vertical alignment of the text will change when the display is changed from inline to inline-block.
172
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
