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

入力ボックスのカーソルサイズの表示が一貫していない問題の解決方法
入力ボックス内のカーソルのサイズが一定ではありません

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イベントについて詳しく学ぶ

推薦する

ウェブページで任意のフォントを使用する実践的な操作とデモ

以前、「Web ページにシステムに組み込まれていないフォントを埋め込む」という研究をしたことがありま...

docker compose を使用して fastDFS ファイル サーバーを構築する方法

前回の記事では、docker compose を使用して FastDfs ファイル サーバーをインス...

W3C チュートリアル (3): W3C HTML アクティビティ

HTML は、World Wide Web 上で公開するために使用されるハイブリッド言語です。 XH...

読み取り専用と無効の微妙な違いの詳細な説明

「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにします...

Chrome 73 によるフレックスレイアウトの崩れの解析と解決方法

現象プロジェクトにはネストされたフレックス構造がいくつかあります。 <スタイル> /* ...

Dockerでパラメータ変数を外部から指定する方法

この記事は主にDockerでパラメータ変数を外部から指定する方法を紹介します。この記事のサンプルコー...

1 つの記事で JSON (JavaScript Object Notation) を理解する

目次JSONが登場JSON構造JSONオブジェクトJson オブジェクトと JavaScript オ...

MYSQLのバックアップデータのスケジュールクリアの特定の操作

1|0 背景プロジェクトの要件により、各月の履歴在庫データをアーカイブしてバックアップする必要があり...

実行中の Docker コンテナにボリュームを動的に追加する方法

以前、Docker コンテナの起動後にボリュームをマウントできるかどうか尋ねられたことがあります。m...

KVM ベースの SRIOV パススルー構成とパフォーマンス テストの詳細な説明

SRIOVの導入、VFパススルー構成、パケット転送速度性能テスト目次1. SRIOVの紹介2. 環境...

Linux で crontab 出力リダイレクトが有効にならない問題の解決方法

質問LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...

MySQL のバックアップとリカバリの設計アイデア

背景まず、背景を説明します。ある制約により、当社の現在のバックアップ戦略では、1 日おきにフル バッ...

WeChatアプレット開発の共通機能と使用方法のまとめ

ここでは、主に小さなプログラムの開発プロセスでよく使われる、非常に実用的な機能ポイントをいくつか整理...

JavaScript インタビュー: 配列の平坦化メソッドを実装する方法

目次1 配列のフラット化とは何ですか? 2 JS標準ライブラリの配列フラット化メソッド3 フラットメ...