Входы рядом с eachother имеют переменные позиции

Question

This little fiddle показывает проблему, с которой я сталкиваюсь.

Форма входа справа выглядит отлично под firefox (и даже IE6), но при просмотре в IE7 + или хроме/хроме есть разница в размере.

Это не фактическая разница в размерах, а иллюзия, созданная некоторыми входами, которые расположены ниже остальных, и переполнение на отсеке отсека.

Я думал, что это может быть какое-то невидимое значение, такое как firefoxes пунктирные линии, но установка outline: none тоже не работает.

Я отлаживал это весь день, и я не знаю, почему он не работает.

Edit: Скриншот

Answer 1

Видимо vertical-align относится к объекту относительно его родителей, а не объекты детей по отношению к объекту. Установка vertical-align на входах к началу исправляет эту проблему (Но я до сих пор не знаю, чем это вызвано, в первую очередь, нечетные)

http://jsfiddle.net/gnxRG/2/

Answer 2

Заменить высота с линией высоты.

http://jsfiddle.net/gnxRG/1/