11

当 Webkit (Safari, Chrome) 遇到一个 inline-block 时...

  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)在这种情况下将 inline-blocks 视为块级元素,因此忽略vertical-align. 那么,谁是正确的,谁是错误的?

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

鉴于当前的行为,我认为以下其中一项是正确的:

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

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

4

1 回答 1

1

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

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

于 2010-05-21T08:11:43.100 回答