图像在IE，FireFox和Safari之间未一致对齐

Question

我在输入字段后面有一个搜索按钮，如下所示：

<div class="sidebarsection">
    <input id="queryfield" placeholder="Search previews..."> 
    <button class="search-button" onclick="runSearch()"><img  src="images/search.png" /></button>
</div>

关联的CSS是

#queryfield {
    width: 130px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}

.search-button {
    width: 26px;
    padding: 0px;
    vertical-align: top;
}

.search-button img {
    height: 16px;
    width: 16px;
}

在FireFox中，这看起来是正确的，如下所示：

在IE中，这看起来是错误的：图像在顶部附近偏移：

在iPad上的Safari中，这也是错误的：

在Chrome中，它也不对：

有没有办法让所有浏览器都像FireFox在上面的示例中那样显示图像？

Answer 1

用于这种方式删除img tag并在background image 中button申请

<button class="search-button" onclick="runSearch()"></button>

<强>的CSS

.search-button{
background:url('../images/search.png') no-repeat center cetner;
width: 26px;
height:26px;
}

Answer 2

vertical-align规则是非常错误的，如果您希望在多个浏览器中完全控制外观，则应该避免使用http://reference.sitepoint.com/css/vertical-align

为什么不使用定位来获得您想要的内容，或者将内部图像调整为您想要按钮的高度和宽度。