css - CSS - FF と Safari での入力 (テキストとボタン) の配置が異なる

Question

ボタンとテキスト入力を 1 つのレベルに揃えようとしましたが、Firefox (正しく配置されている) と Safari (正しく配置されていない) では異なる結果が得られます。

私は JSFiddle を作成し、両方のブラウザーで異なる動作を確認できますが、現時点ではなぜこれが起こっているのかわかりません。

誰かが答えを知っていますか？

ありがとう！

JSFiddle: http://jsfiddle.net/LPgJr/2/

Answer 1

両方を左にフロートさせたい - http://jsfiddle.net/LPgJr/3/

その後、フロートをクリアすることを忘れないでください。

Answer 2

WebKit and Gecko render the heights of the text field differently, that's for sure. Try, in your fiddle, successively changing the padding of the text field. Try 0px, 1px, 2px, then 3px, 10px, 25px, 40px, 80px, anything. You can see that the padding on the text field affects the vertical position of the button. The larger the padding on the text field, the lower the button drops.

Why is this? Because the browsers are lining up the text in the text area with the text on the button.

Example here: http://jsfiddle.net/rtoal/LPgJr/6/

The browsers are giving different appearances because of the way they render text fields. Set the height explicitly, as suggested by SpaceBeers.