html - HTML と CSS テキスト入力ボックスの高さが変わり続ける

Question

検索バーを作っています。テキスト入力ボックスと検索ボタンは予定通り横に並んでいますが、ブラウザを展開すると入力ボックスの高さがどんどん変化していきます。コードを何度か確認しましたが、問題の原因がわかりません。どんな助けでも大歓迎です:)

http://jsfiddle.net/tmjfd/3/

Answer 1

あなたはあなたがpaddingパーセンテージとして与えられていると定義しています。これはドキュメントのサイズに応じて拡大縮小され、入力の合計高さに影響します。入力をスケーリングしない場合は、固定値を使用する必要があります。

Answer 2

あなたが変わるなら

input{
    padding: 1.5%; 
}

に

input{
    padding: 6px;
}

それはそれを修正します。問題は、パディングのパーセンテージがウィンドウ サイズに基づいていることでした。

Answer 3

この問題は、設定によって引き起こされますpadding: 1.5%。パーセンテージは、含まれているブロックの幅に相対的です。em設計要件に応じて、ユニットを取り外すか、代わりにユニットを使用してください。