CSS - 输入（文本和按钮）在FF和Safari中以不同方式对齐

Question

我尝试在一个级别上对齐按钮和文本输入，但我在Firefox（正确对齐）和Safari（未正确对齐）中得到不同的结果。

我创建了一个JSFiddle，您可以在两种浏览器中看到不同的行为，但目前我无法说明为什么会这样。

有人知道答案吗？

谢谢！

的jsfiddle： http://jsfiddle.net/LPgJr/2/

Answer 1

你想要将它们左移 - http://jsfiddle.net/LPgJr/3/

不要忘记事后清理你的花车。

Answer 2

WebKit和Gecko以不同的方式呈现文本字段的高度，这是肯定的。尝试在您的小提琴中，连续更改文本字段的填充。尝试0px，1px，2px，然后3px，10px，25px，40px，80px，任何东西。您可以看到文本字段上的填充会影响按钮的垂直位置。文本字段中的填充越大，按钮下降越低。

这是为什么？因为浏览器使用按钮上的文本排列文本区域中的文本。

此处示例：http://jsfiddle.net/rtoal/LPgJr/6/

由于浏览器呈现文本字段的方式，浏览器呈现出不同的外观。按照SpaceBeers的建议明确设置高度。