css - 图像在 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标签并在按钮中应用背景图片 像这样

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

CSS

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