html - 垂直对齐文本框旁边的图像在 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