html - 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>

我的小提琴

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

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

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

Answer 1

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

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

jsFiddle 示例

span img {
    vertical-align: top;
}