Safari中内联元素的顶部垂直对齐答案

【问题标题】：Top vertical align on inline element in SafariSafari中内联元素的顶部垂直对齐
【发布时间】：2013-11-08 03:56:51
【问题描述】：

我喜欢将内联元素与其他封闭内联元素的顶部对齐。

这是我的代码：

<style>
  span {
    vertical-align: top;
  }
</style>
<span><a><img src="http://placekitten.com/100/100" /></a></span>
<span><a><img src="http://placekitten.com/100/50" /></a></span>

My Fiddle

由于某种原因，Safari（Mac 版）无法处理此代码，它会将图像与底部对齐。 :(

有谁知道问题出在哪里，甚至如何解决？欢迎使用纯 HTML 和 CSS不更改上述任何元素的显示属性的所有解决方案。

最后一个限制是最困难的部分。 ;)

【问题讨论】：

标签： html css safari inline vertical-alignment

【解决方案1】：

坦率地说，它不适用于任何浏览器。

在img 上使用vertical-align，而不是父级span。这是该属性的正确用法。

jsFiddle example

span img {
    vertical-align: top;
}

【讨论】：

感谢您快速实用的回答！我想给你 +1，但我不被允许。