ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探してみたら、本当にありました!あなた自身の便宜と他の人の便宜のために書き留めてください。 以前、プロジェクトで問題が発生しました。 入力ボックスは背景画像でシミュレートされ、入力テキストが中央に配置されるように、高さは行の高さと同じに設定されています。 FF では、入力をクリックすると、入力カーソルは実際には入力と同じ高さになりますが、テキストの入力を開始すると、カーソルはテキストと同じ高さになります。 Chrome では、カーソルの高さは入力の高さと同じになります。 IE では、カーソルはテキストと同じサイズになります。 なぜそうなるのか今まで理解できなかったのですが、今日ルーブル美術館でクラスメートとの議論を聞いて、ようやくその理由が分かりました。 予備的な結論は次のとおりです。 IE: 行にテキストがあるかどうかに関係なく、カーソルの高さはフォント サイズと一致します。 FF: 行にテキストがある場合、カーソルの高さはフォント サイズと一致します。行にテキストがない場合、カーソルの高さは入力の高さと同じになります。 Chrome: 行にテキストがない場合、カーソルの高さは行の高さと同じになります。行にテキストがある場合、カーソルの高さは入力の上からテキストの下までになります (どちらの場合も行の高さが設定されている場合)。行の高さがない場合は、フォント サイズと同じになります。 解決: 入力の高さを小さく設定し、パディングを使用して埋めることで、基本的にすべてのブラウザで問題を解決できます。 コードをコピー コードは次のとおりです。入力{ 高さ:16px; パディング:4px0px; フォントサイズ:12px; } |
<<: CSS の div の下の同じ行にある複数の要素を右揃えにする
>>: Linux RabbitMQ クラスタ構築プロセス図
目次Vue ファースト スクリーン パフォーマンス最適化コンポーネント説明するインターセクションオブ...
それは何ですか? em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ...
目次序文数独の解き方最初のボックスに記入してください2番目のボックスに記入してください3番目のボック...
目次セーフモード設定テスト1. where句なしで更新および削除する2. 非インデックスキーの削除3...
目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...
jQuery を使用してフェードインとフェードアウト効果を完成させる前に、まずいくつかのコードを理解...
序文: Vue では、props を使用して、もともと分離されていたコンポーネントを直列に接続するこ...
目次前面に書かれた環境の展開Zookeeper クラスタの展開Clickhouse クラスターの展開...
目次事業背景テクノロジーの活用技術的な問題デザインのアイデア😱 困惑と苦痛に満ちた顔🙄考え始める🌲デ...
目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...
オンラインで多くの記事を検索しましたが、解決策は見つかりませんでした。次のように、tomcat7-m...
この記事では、ログインスライダー検証を実装するためのJavaScriptの具体的なコードを参考までに...
<!DOCTYPE ヘムル パブリック> <html> <ヘッド&g...
目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...
1.デバイス幅定義: 出力デバイスの画面表示幅を定義します。 Web ページが Safari で開か...