Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法

ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探してみたら、本当にありました！あなた自身の便宜と他の人の便宜のために書き留めてください。

以前、プロジェクトで問題が発生しました。
入力ボックスは背景画像でシミュレートされ、入力テキストが中央に配置されるように、高さは行の高さと同じに設定されています。
FF では、入力をクリックすると、入力カーソルは実際には入力と同じ高さになりますが、テキストの入力を開始すると、カーソルはテキストと同じ高さになります。
Chrome では、カーソルの高さは入力の高さと同じになります。
IE では、カーソルはテキストと同じサイズになります。
なぜそうなるのか今まで理解できなかったのですが、今日ルーブル美術館でクラスメートとの議論を聞いて、ようやくその理由が分かりました。

予備的な結論は次のとおりです。
IE: 行にテキストがあるかどうかに関係なく、カーソルの高さはフォントサイズと一致します。
FF: 行にテキストがある場合、カーソルの高さはフォントサイズと一致します。行にテキストがない場合、カーソルの高さは入力の高さと同じになります。
Chrome: 行にテキストがない場合、カーソルの高さは行の高さと同じになります。行にテキストがある場合、カーソルの高さは入力の上からテキストの下までになります (どちらの場合も行の高さが設定されている場合)。行の高さがない場合は、フォントサイズと同じになります。

解決：
入力の高さを小さく設定し、パディングを使用して埋めることで、基本的にすべてのブラウザで問題を解決できます。

コードをコピー

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

入力{
高さ:16px;
パディング:4px0px;
フォントサイズ:12px;
}

<<: CSS の div の下の同じ行にある複数の要素を右揃えにする

>>: Linux RabbitMQ クラスタ構築プロセス図