垂直对齐文本框旁边的图像在Chrome或Safari中不起作用

我正在尝试将文本框旁边的图像链接对齐。这是我的标记：垂直对齐文本框旁边的图像在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中，文本框被推下。

这是的jsfiddle：http://jsfiddle.net/tQUyW/

任何方式来解决呢？

来源

2011-09-20 Steven

“垂直对齐”作用比在表格单元格“垂直对齐”完全不同。请参阅[如何（不）以垂直居中内容]（http://phrogz.net/css/vertical-align/index.html），它适用于任何使用“vertical-align”属性的内容。 – animuson