Webkit 忽略包含 line-boxes 的 inline-blocks 的垂直对齐

Question

当 Webkit (Safari, Chrome) 遇到 inline-block where...

1. 指定了line-height 高度
2. 内容使用多个行框呈现

...inline-block 元素忽略指定的vertical-align。

为了帮助说明问题，我有一个小测试用例： http://arther.net/lab/webkit-vertical-align-test.html#test

---

Firefox 3.6、Opera 10.53 和 IE7+ 将这些内联块视为内联元素，并且垂直对齐按预期工作。 Webkit 浏览器（和 Opera 10.10）在这种情况下将内联块视为块级元素，因此忽略 vertical-align。那么，谁对谁错？

我可以看到这两种方式。一方面，你可以说所有内联元素——甚至是内联块——都应该按照vertical-align 将自己正确地定位在包含的行框中。另一方面，内联元素通常定义一个单独的内联框并且没有自己的行框。任何包装多个行框应该都是块级元素。在这种情况下，应将 inline-block 视为一个块，从而忽略vertical-align。

鉴于当前的行为，我认为以下情况之一是正确的：

• 这是一个 Webkit 错误
• 这是所有其他渲染引擎中的错误
• 规范对处理这种特殊情况的表述含糊不清，正在采取不同的方法

如果有人能就这个问题以及预期的行为应该是什么提供一些澄清，我将不胜感激。

Answer 1

这看起来像一个错误，因为它在该部分仅占一行时起作用。

Chrome 和 Safari 有一个功能，您可以报告错误以帮助他们的开发人员修复它。