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

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

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

推薦する

Navicat が MySQL に接続するときに発生する 1045 エラーの解決方法

ローカル データベースに接続すると、Navicat for MySQL は以下のように 1045 エ...

LINUX ポートが占有されているかどうかを確認します

ポートが占有されているかどうかは、これまで一度もわかりませんでした。多くの人に尋ねて、ようやくわかり...

ファイルアップロードスタイルの詳細を実装するjs

目次1. 概要2. オブジェクト作成のパラメータ3. 監視例4. 使用方法5. ソースコード1. 概...

MySQL inndbジョイントインデックスを正しく使用する方法を徹底的に理解するためのケーススタディ

最近確認された5件のデータを照会するビジネスがあります。 `id`、`title` を選択 `th_...

MySQL における explain の役割の詳細な説明

1. MYSQLインデックスインデックス: MySQL がデータを効率的に取得するのに役立つデータ構...

Linux mysql5.5 を mysql5.7 にアップグレードする手順と落とし穴

目次Linux MySQL 5.5 が MySQL 5.7 にアップグレードされました1. mysq...

イラスト風ウェブサイトホームページデザイン ウェブサイトデザインの新トレンド

視覚効果が非常に美しく、訪問者に強い印象を残すことがわかります。さらに、重要なポイントが強調され、訴...

MySQLでヘッダー付きのCSVファイルをエクスポートする方法

公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...

MySQL 5.7.17 インストール グラフィック チュートリアル (Windows)

最近データベースを学び始めたのですが、とても興味深いコースだと感じていますが、含まれる内容の多くは私...

JSのバイナリファミリーについての簡単な説明

目次概要ブロブBlob の動作BLOB ダウンロード ファイルブロブ画像のローカル表示BLOB ファ...

高度な CSS の 3 つの方法を使用して複数行の省略を実装するサンプル コード

序文これは古くからの要望ですが、オンラインで解決策を探している人はまだ多く、特に検索結果の上位にラン...

VMware 仮想マシンのネットワークの問題の解決方法

目次1. 問題の説明2. 問題解決1. 仮想マシンシステムのインストール時にネットワークがない場合2...

ウェブページのFOUC問題によるウェブページの混乱の解決策

FOUC は Flash of Unstyled Content の略で、FOUC と略されます。簡...

MySQLとNavicatプレミアムのインストールと設定の詳細な手順

前提条件: Mac、zsh がインストールされ、bash のときに mysql がダウンロードされ、...

Jenkins の Docker のデプロイとインストール手順

まず、Docker がインストールされたサーバーが必要です。 (私はすでにこれをサーバーにインストー...