Html 垂直对齐文本框旁边的图像不会'；不要在Chrome或Safari中工作

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

<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中，文本框被按下

在JSFIDLE中：

---

有没有办法解决这个问题？

将

a

元素向右浮动，并移除@animuson所述的

vertical align:top

内联元素上的“垂直对齐”与表格单元格上的“垂直对齐”作用完全不同。请参见，它适用于使用“垂直对齐”属性的任何对象。