圖片不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在上面的例子中？

來源

2013-04-22 Gene Golovchinsky

有一件事可能會幫助你添加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; 
}

來源

2013-04-22 04:31:33

工作。僅供參考，'cetner'應該是'center' – 2013-04-22 05:07:23

嘛vertical-align規則是相當越野車，應該可能是如果您想要在多個瀏覽器中完全控制外觀，請避免使用以下內容：http://reference.sitepoint.com/css/vertical-align

爲什麼不使用定位來獲得你想要的或者調整你的內在形象的大小，使之成爲你想要的按鈕的高度和寬度。

來源

2013-04-22 04:31:43

圖片不IE，火狐，和Safari

回答

相關問題