Webkit 忽略包含行框的内联块的垂直对齐
当 Webkit（Safari、Chrome）遇到内联块时...
- 指定了
line-height高度， - 内容将使用多个行框呈现
...内联块元素会忽略指定的垂直对齐。
为了帮助说明问题，我有一个小测试用例： 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 将自己正确定位在包含的行框中。另一方面，内联元素通常定义单个内联框，并且没有自己的行框。任何包裹多个行框的东西都应该是块级元素。在这种情况下，内联块应该被视为一个块，从而忽略垂直对齐。
鉴于当前的行为，我认为以下情况之一是正确的：
- 这是一个 Webkit 错误
- 这是所有其他渲染引擎中的一个错误
- 规范对于处理这种特殊情况含糊不清，并且正在采取不同的方法
如果有人可以提供一些如果能澄清这个问题以及预期的行为应该是什么，我将不胜感激。
When Webkit (Safari, Chrome) encounters an inline-block where...
- the
line-heightheight is specified - the content is rendered using multiple line-boxes
...the inline-block element ignores the specified vertical-align.
To help illustrate the problem, I have a small test case:
http://arther.net/lab/webkit-vertical-align-test.html#test
Firefox 3.6, Opera 10.53, and IE7+ treat these inline-blocks like inline elements, and vertical align works as expected. Webkit browsers (and Opera 10.10) treat the inline-blocks in this situation like block-level elements, thus ignoring vertical-align. So, who is right, and who is buggy?
I can see this going either way. On one hand, you can say that all inline elements — even inline-blocks — should position themselves properly within the containing line-box as per vertical-align. On the other hand, inline elements usually define a single inline-box and don't have line-boxes of their own. Anything wrapping multiple line-boxes should be a block-level element. In that case, the inline-block should be treated as a block, which would thus ignore vertical-align.
Given the current behavior, I figure that one of the following is true:
- this is a Webkit bug
- this is a bug in all other rendering engines
- the spec is vague about handling this particular situation, and different approaches are being taken
If anyone could provide some clarification on the issue and what the expected behavior should be, I would greatly appreciate it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这看起来像一个错误，因为当该部分仅占一行时它会起作用。
Chrome 和 Safari 有一个功能，您可以报告错误以帮助其开发人员修复它。
This looks like a bug, since it works when the section takes only one line.
Chrome and Safari has a function where you can Report bugs to help their developers fix it.