垂直对齐文本框旁边的图像在Chrome或Safari中无效

Question

我正在尝试对齐文本框旁边的图片链接。这是我的标记：

<div style="height: 18px; overflow: hidden; padding: 5px 6px 6px 5px; width: 207px; background-color: #21235C">
    <input id="search" type="text" name="search" style="height: 18px; padding: 0; width: 182px; border: none;" />
    <a style="vertical-align: top;" href="#">
        <img src="http://i.imgur.com/0UZyz.png" alt="search" />
    </a>
</div>

这在FF和IE中运行良好。图像在文本框旁边正确对齐。但在Chrome和Safari中，文本框会被推下来。

这里是jsFiddle：http://jsfiddle.net/tQUyW/

有什么方法可以解决这个问题吗？

Answer 1

将a元素向右浮动，然后移除vertical-align: top，如@animuson所述。

http://jsfiddle.net/fTadS/1