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

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

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

推薦する

Vue の高度なコンポーネント機能コンポーネントの使用シナリオとソースコード分析

目次導入使用シナリオソースコード分析要約する導入Vue は、コンポーネントをステートレスかつインスタ...

HTMLにビデオを挿入してすべてのブラウザと互換性を持たせる方法

HTML にビデオを挿入するために最もよく使用される方法は 2 つあります。1 つは古い <o...

初心者向けBootstrap 3.0学習ノート

この学習ノートの最初の記事として、シリーズの他の記事と同様に、Bootstrap の紹介から始め、そ...

Mysqlの同時パラメータ調整の詳細な説明

目次クエリキャッシュの最適化概要クエリプロセスクエリキャッシュ構成クエリキャッシュの無効化メモリ管理...

nginx を使用して正規表現で指定された URL リクエストを傍受する方法

nginx サーバーnginx は、静的ファイルの処理に非常に効率的な優れた Web サーバーです。...

vscode で console.log を書く 2 つの簡単な方法の詳細な説明

(I) 方法 1: 事前にスクリプト タグ内に直接定義します。この HTML ファイルにのみ適用され...

フレックスレイアウトが子要素によって引き伸ばされたときに、コンテンツをコンテナ内に保持する方法

モバイル デバイスでは、フレックス レイアウトが非常に便利です。デバイスの幅に応じてコンテナーの幅を...

MySQLインデックス最適化分析に関する簡単な説明

記述した SQL クエリが遅いのはなぜですか?作成したインデックスが頻繁に失敗するのはなぜですか?こ...

Vue で変数式セレクターを実装する方法

目次HTML構造の定義入力タグのバインディング属性入力タグはキーダウンイベントをリッスンしますli ...

AngularとIonicのライフサイクルとフック関数を素早く理解するための記事

目次角度成し遂げる呼び出し順序知らせイオニックionic はページのライフサイクルをどのように処理し...

JavaScript を使用してテーブル情報を追加および削除する

JavaScript 入門JavaScript は軽量なインタープリタ型の Web 開発言語です。言...

MySQL DDL による同期遅延を解決する方法

目次序文解決ツールの紹介仕組み使用制限使用上の注意使用例いくつかのパラメータの説明出力例Tencen...

Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明

目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...

MySQL でスロークエリを有効にする方法の例

序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...