html - 当溢出设置为隐藏时，嵌套的 inline-block 元素在 FF / IE 中向上推

Question

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

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

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

小提琴

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

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

小提琴

Answer 1

vertical-align: top在你有的地方添加display: inline-block。

Answer 2

这是由于溢出规范，它仅适用于块元素以及行高如何工作。

默认情况下 ，您的外部跨度为display:inline. 内联元素不应包含块元素。虽然，将其设置为display:block不会解决问题。

问题是文本（外部元素）的基线与内部元素的框相同。因此，该框位于与文本开头相同的高度（这会留下一些空白）。

无论如何，使用演示可能更容易理解。

如果您将内部跨度的 line-height 设置为低于文本实际高度，则框将保留其大小。当然，三十点解决方案也是有效的。