彼此相邻的输入具有可变位置

Question

This little fiddle显示了我遇到的问题。

右边的登录表单在firefox（甚至是IE6）下看起来很好，但是在IE7 +或chrome / chromium中查看时存在尺寸差异。

这不是一个实际的尺寸差异，而是由一些输入产生的幻觉变得比其他输入低，而div上的溢出会将它们切断。

我认为它可能是一些看不见的值，例如firefoxes虚线，但设置outline: none也不起作用。

我整天都在调试这个，但我不知道它为什么不起作用。

修改屏幕截图

Answer 1

用行高替换高度。

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

Answer 2

显然vertical-align适用于相对于父对象的对象，而不是相对于对象的对象子对象。将输入设置为vertical-align到顶部可以解决问题（但我仍然不知道是什么原因引起了它，奇怪）

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