当 Webkit (Safari, Chrome) 遇到一个 inline-block 时...
- 指定
line-height
高度 - 使用多个行框呈现内容
... 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 错误
- 这是所有其他渲染引擎中的错误
- 规范对处理这种特殊情况含糊不清,并且正在采取不同的方法
如果有人可以就这个问题以及预期的行为应该是什么提供一些澄清,我将不胜感激。