css - 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 的建议，明确设置高度。