Проблема с высотой input в разных браузерах

[IvanRu08]

Наткнулся на эту проблему, когда проверял кроссбраузерность. Вот страница: http://cm04741.tmweb.ru/single.html. Внизу есть форма подписки. Там кнопка "Подписаться". В разных браузерах высота кнопки разная (нужно, чтобы кнопка располагалась вместе с полем для ввода). Например, если в хроме все нормально, то в мозиле, опере и осел кнопка на 1px меньше чем нужно. Пробовал и высоту задавать и просто padding - все то же самое. Как решить такую проблему? Заранее спасибо за ответ!

Edited September 1, 2015 by IvanRu08

[Sensei]

Я так понимаю, проблема не в высоте, а в выравнивании.

Инпуты по умолчанию «display: inline;» и выравнены по базовой линии.

Так как высота строки у поля меньше, чем у кнопки происходит сдвиг.

 

Задайте инпутам «vertical-align: top;».

[kattiperk]

Всё дело в шрифте.

Chrome по-другому его рендерит. Он типа нестандартный и хром не в курсе вообще что за херня происходит. Хотя может и в курсе, но решил ничего не менять и делать по-своему.

 

Попробуй

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

 

Или

 

.subs-submit {
   float: right;
   clear: right;
   margin: 0;
}

Edited September 1, 2015 by kattiperk

[IvanRu08]

Я так понимаю, проблема не в высоте, а в выравнивании.

Инпуты по умолчанию «display: inline;» и выравнены по базовой линии.

Так как высота строки у поля меньше, чем у кнопки происходит сдвиг.

 

Задайте инпутам «vertical-align: top;».

Спасибо! Проблема решена!