入力ボックスのカーソルサイズの表示が一貫していない問題の解決方法

入力ボックス内のカーソルのサイズが一定ではありません

IE7とChromeの違いは非常に明白です

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

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

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

方法 2: Chrome の場合は line-height を設定しないでください。テキストが自動的に中央に配置されます。IE の場合は、テキストが垂直方向に中央に配置されることを確認するために line-height 値を設定してください。ここで注意すべき点は、リセットスタイルファイルで line-height やその他の値が設定されている場合は、line-height をリセットしてください。line-height:normal を使用できます。詳細はテンセントハリウッドページの検索ボックスをご覧ください。

特定の CSS:

コードをコピー

コードは次のとおりです。

高さ: 34px;
フォントサイズ: 12px;
行の高さ: 通常;
行の高さ: 34px\9;

<<: テキストレイアウトの問題を解決するためにテキストオーバーフローを使用する CSS3 の簡単な分析

>>: 最もよく使用されるJavaScriptイベントについて詳しく学ぶ