Поле ввода и кнопка не соответствуют IE и Firefox

Question

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

Я наткнулся на эту проблему

http://imgur.com/gS3q02W

Кнопка и поле ввода не выстраиваются в линию по горизонтали. Независимо от того, что я меняю на один, он всегда отличается от другого в другом браузере.

Кто-нибудь знает о кросс-браузерном решении?

HTML

<div id='search'> 
       <form> 
        <input class='search' type="text" placeholder="what would you like to find?" required> 
        <input class='button' type="button" value="search"> 
       </form> 
      </div> 

CSS

#search { 
    padding-left:200px; 
    margin-right:5px; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 12px; 
    } 

.search { 
    margin-top:5px; 
    padding:4px 15px; 
    width:250px; 
    background:#FFF; 
    border:none; 
    color:#232d38; 
    } 

.button { 
    position:relative; 
    padding:4px 15px; 
    left:-4px; 
    border:none; 
    background-color:#FFF; 
    color:#232d38; 
    } 

.button:hover { 
    border:none; 
    background-color:#FFF; 
    color:#000; 
    } 

Answer 1

Я нашел решение.

Проблема связана с стилями по умолчанию в браузере. Mozilla, в их бесконечной мудрости, решил поставить эту строку в их CSS:

button, input[type="reset"], input[type="button"], input[type="submit"] { 
line-height:normal !important; 
} 

В Firefox, кнопки получить дополнительную 2 отступы. Во всех других браузерах они этого не делают. Таким образом, невозможно совместить их с использованием только дополнений.

Вы должны установить верхнюю и нижнюю прокладку на 0px и использовать height: 25px; vertical-align: middle;, чтобы компенсировать потерю прокладки.

Answer 2

У меня была эта же проблема, и я использовал ответ Джона выше, чтобы придумать решение, не используя свойства высоты и вертикального выравнивания.

В моем стиле стирания я в основном сделал это так, чтобы все входы имели нормальную высоту линии, чтобы Chrome отображал то же, что и Firefox и IE. Важное дополнение между этим и приведенным выше кодом Джона в качестве таргетинга на общий селектор ввода:

button, input[type="reset"], input[type="button"], input[type="submit"], input 
{ 
line-height:normal !important; 
}