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ユニットを使用してください。