图片不IE，火狐，和Safari

问题描述：

之间一致地对准我有以下内容的输入字段搜索按钮，这样指定的：图片不IE，火狐，和Safari

<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中，这看起来是正确的，是这样的：

FireFox

在IE浏览器，这看起来w ^荣：图像顶部附近偏移：

在Safari浏览器在iPad上，这也是错误的：

Safari

在Chrome中，这也是不对的：

enter image description here

有没有办法让所有的浏览器显示图像为FireFox d oes在上面的例子中？

有一件事可能会帮助你添加5px的边距或填充到你的img。 – 2013-04-22 04:31:07

答

习惯了这种方式删除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; 
}

工作。仅供参考，'cetner'应该是'center' – 2013-04-22 05:07:23

答

嘛vertical-align规则是相当越野车，应该可能是如果您想要在多个浏览器中完全控制外观，请避免使用以下内容：http://reference.sitepoint.com/css/vertical-align

为什么不使用定位来获得你想要的或者调整你的内在形象的大小，使之成为你想要的按钮的高度和宽度。

图片不IE，火狐，和Safari

相关推荐