入力ボックスのカーソル高さ変更問題_html/css_WEB-ITnose

input[type='text'] テキストボックスのカーソルの高さは、入力内容がある場合と空の場合で大きく変わります。

まず、問題の原因を見てみましょう: Chrome ブラウザのカーソルの高さの設定原則は、コンテンツがない場合、カーソルの高さ = 入力の行の高さの値です。コンテンツがある場合、カーソルは入力からテキストの上からテキストの下に移動します。

さて、原因が分かりましたので、それに応じた対策を講じます。それを行うには2つの方法を試しました:

方法 1: フォント サイズと一致するように行の高さの値を設定します。高さに達しない場合は、パディングを使用してサポートします。

方法 2: クロムの行の高さを設定しないでください。テキストを自動的に中央揃えにします。IE をハックして、テキストが垂直方向に中央揃えになるように line-height の値を設定します。リセット スタイル ファイルに line-height などの値が設定されている場合は、行をリセットしてください。 -height を使用できます。 line-height:normal。