изображения не выровнено последовательно между 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 это выглядит ш Ронг: изображение смещено в верхней:

В Safari на IPAD, это тоже неправильно:

В Chrome, это также не верно:

Есть ли способ заставить все браузеры отображать изображение как FireFox d в приведенных выше примерах?

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

Почему бы не использовать позиционирование, чтобы получить то, что вы хотите или изменить размер вашего внутреннего изображения, чтобы быть точной высотой и шириной того, что вы хотите, чтобы ваша кнопка была.