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 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

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