Safari和FireFox中div的垂直中心图像差异

Question

我目前正在Safari和Firefox中进行比较。 div中的一个小图像，我需要垂直居中。

这是一个简单的测试用例，我已经提炼出来了： http://dl.getdropbox.com/u/340087/Drops/09.23.09/so-03f73322-164033.html

这个可能更简单： http://dl.getdropbox.com/u/340087/drops/09.23.09/align-42fc19f2-154007.html

1）为什么我需要在图像后面留一个空格才能让任何对齐的CSS工作？

2）我可以做些什么来让Safari完美居中，它是1-2px太低，基本上用文本排列图像的顶部。

由于

Answer 1

图像被视为内联元素，因此它们基本上被视为文本。

如果您想要跨浏览器进行精确定位，最安全的方法是将图像用作背景，而不是内联img元素。

Answer 2

将文本括在一个范围内，并对其应用vertical-align。

HTML片段：

<div class="right">
    <img src="action_check.png" width="16" height="16" class="status" alt="Data Ok" />
    <span>Chose a User Name</span>
</div>

CSS补充：

span { vertical-align: middle; }

在最新版本的FF，IE，Safari，Chrome和Opera（Windows）中测试过。

Answer 3

尝试使用通用选择器：

div * { vertical-align: middle }

或去旧学校（如果可以的话）并使用表格？

由于safari呈现文本的方式，Safari（Mac）和浏览器中的像素总是有差异。阅读它here。