显示：内联块和溢出：隐藏导致不同的垂直对齐 [英] display:inline-block and overflow:hidden leading to different vertical alignment
问题描述
（IE = FF =高于基准值，Chrome =基准值）
-
是谁的错？我应该在哪里提交错误报告？
你知道如何让这个跨浏览器解决的方法吗？如果我更改垂直对齐方式，我可以在某些浏览器中使用它，但不能使用其他浏览器。 lang-html prettyprint-override> 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;
颜色：红色;
}
< / style>
< / head>
< body>
baseline __< div class =a> test< / div> __ baseline
< / body>
< / html>
看来Chrome是错误的。 CSS 2.1规范说：
内嵌块的基线是正常流程中其最后一行框的基线
，除非它没有任何流入如果
其'overflow'属性的计算值不是'visible'，则
这种情况下的基线是底部边缘边缘。
由于溢出属性计算为可见以外的内容，因此内嵌块的基线是底边缘，位于包含线框的基线上，因此必须向上包含的文本，以允许该文本的下行空间。
The following code renders differently in different browsers (IE = FF = higher than baseline, Chrome = on baseline).
<!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>
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.
这篇关于显示：内联块和溢出：隐藏导致不同的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
