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>

My Fiddle

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

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

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

Answer 1

坦白说，它在任何浏览器中都不起作用。

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

jsFiddle example

span img {
    vertical-align: top;
}