当溢出设置为隐藏时，嵌套的内联块元素在FF / IE中被向上推

Question

Chrome中不会发生这种情况。我正在尝试为嵌套元素实现省略号。有没有其他人遇到这个，如果是的话，你能够解决这个问题吗？

<span>bar <span class="foo">foo</span> bar</span>

span.foo {
    display: inline-block;
    overflow: hidden;        
}

Fiddle

<a href="http://www.stackoverflow.com">bar <span class="foo">foo</span> bar</a>

span.foo {
    display: inline-block;
    text-decoration: inherit;
    overflow: hidden;        
}

Fiddle

Answer 1

将vertical-align: top添加到display: inline-block。

Answer 2

这是由于the specification on overflow，它仅适用于块元素以及行高的工作方式。

您的外部范围默认为 display:inline。 内联元素不应包含块元素。虽然将其设置为display:block无法解决问题。

问题是文本的基线（外部元素）对于内部元素的框是相同的。所以框位于应该开始文本的相同高度（这会留下一点白色空间）。

无论如何，理解with a demo可能更容易。

如果将内跨的行高设置为低于文本实际高度，则该框将保留其大小。当然，thirtydot解决方案也是有效的。