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

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

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

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

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

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

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

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

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

推薦する

Vue プロジェクトの最初の画面のパフォーマンス最適化コンポーネントの実践ガイド

目次Vue ファースト スクリーン パフォーマンス最適化コンポーネント説明するインターセクションオブ...

emとは?emとpxの紹介と変換方法

それは何ですか? em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ...

JavaScript を使用した数独の完全な実装プロセス

目次序文数独の解き方最初のボックスに記入してください2番目のボックスに記入してください3番目のボック...

MySQL はどのようにしてデータベースの削除と暴走を効果的に防ぐことができますか?

目次セーフモード設定テスト1. where句なしで更新および削除する2. 非インデックスキーの削除3...

WeChatアプレットのスワイパードットのドットをスライダーに変更する方法

目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...

jQueryはフェードインとフェードアウト効果を実現します

jQuery を使用してフェードインとフェードアウト効果を完成させる前に、まずいくつかのコードを理解...

Vue での props の使い方の紹介

序文: Vue では、props を使用して、もともと分離されていたコンポーネントを直列に接続するこ...

Clickhouse Docker クラスターの展開と構成を例を使って説明します

目次前面に書かれた環境の展開Zookeeper クラスタの展開Clickhouse クラスターの展開...

React でカレンダー コンポーネントを構築するためのステップ バイ ステップ ガイド

目次事業背景テクノロジーの活用技術的な問題デザインのアイデア😱 困惑と苦痛に満ちた顔🙄考え始める🌲デ...

Javascriptのクロージャとアプリケーションの詳細な説明

目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...

Maven で tomcat8-maven-plugin プラグインを使用する詳細なチュートリアル

オンラインで多くの記事を検索しましたが、解決策は見つかりませんでした。次のように、tomcat7-m...

ログインスライダー検証を実装するJavaScript

この記事では、ログインスライダー検証を実装するためのJavaScriptの具体的なコードを参考までに...

JS を使用して HTML で回転するクリスマスツリーを実装する

<!DOCTYPE ヘムル パブリック> <html> <ヘッド&g...

JavaScript Promise の徹底解説

目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...

CSS3 メディアクエリにおけるデバイス幅と幅の違いの詳細な説明

1.デバイス幅定義: 出力デバイスの画面表示幅を定義します。 Web ページが Safari で開か...