Почему в разных браузерах по разному отображаются input?

Question

[etherreals]

В firefox высота первого input на 2px меньше
В safari вообще намного меньше.
В chrome, opera, ie 9+ и в codepen.io смотрится, как надо.
Пробовал убирать padding, добавлять height и line-height, но от этого становилось еще хуже.
Это самый лучший вариант, которого я смог добиться.
codepen.io/anon/pen/EaOzwy
Как сверстать кроссбраузерно данную форму?

Answer 1

[gleendo]

для таких вещей есть normalize.css

Comments

[etherreals]

Спасибо за решение. Всегда пользовался normalize, а сейчас не подключил.

Answer 2

[Никита Наумов]

мне кажется, что в примере не проставлены доп. переменные -webkit и -moz

-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

Comments

[etherreals]

Добавление box-sizing на результат не влияет, хоть с префиксами или без них