在Safari中的内联元素上进行顶部垂直对齐

Question

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

这是我的代码：

<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-Version）无法处理此代码，它会将图像对齐到底部。 ：（

有谁知道问题是什么，甚至怎么解决？欢迎使用纯HTML和CSS 的所有解决方案，而不更改上述任何元素的display-property 。

最后一个限制是艰难的部分。 ;）

Answer 1

坦率地说，它无法在任何浏览器中使用。

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

jsFiddle example

span img {
    vertical-align: top;
}