internet-explorer - 为什么 `overflow-x` 会改变 Firefox 和 IE 中的行内块框的高度？

Question

看看这个 jsFiddle。

http://jsfiddle.net/beatak/7UrGA/show/

我想让文字看起来很直。通过更改overflow-x:hiddenon .boxless-select-text，您可以看到基线移动。它不会发生在 Webkit 浏览器（Google Chrome 和 Safari）上。

Answer 1

Firefox 和 IE 行为是规范要求的行为：

'inline-block' 的基线是它在正常流中的最后一个行框的基线，除非它没有流入行框，或者如果它的 'overflow' 属性具有除 'visible' 之外的计算值，在在这种情况下，基线是底部边距边缘。

它没有在 WebKit 中发生的原因是因为https://bugs.webkit.org/show_bug.cgi?id=36084（他们没有修复它，因为它们具有取决于错误的各种 Apple 专有内容，据我所知）。该错误报告也有相关的规范文本和参考。

Answer 2

试试这个：

.boxless-select-text {
    ...
    vertical-align: bottom;
}