IE、Firefox、Chromeブラウザではスペースの表示が異なります

IE、Firefox、Chromeブラウザではスペースの表示が異なります
  IE、Firefox、Chrome ブラウザでの表示効果は、主に先行スペースの幅が異なるため、若干異なります。

オンライン情報によると、ブラウザによってデフォルトのフォントが異なります。一般的に、IE のデフォルトのフォントは Songti で、Firefox と Chrome のデフォルトのフォントは Times New Roman です。
Songti は等幅文字のフォントですが、Times New Roman はブラウザのデフォルトフォントが異なるため、等幅文字のフォントではありません。
スペース文字の表示幅はブラウザによって異なります。

たとえば、次のコードはそれぞれIEとChromeでテストされています。

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

<テーブル>
<tr>
<td>私は最初の列です</td>
</tr>
<tr>
<td>nbsp;nbsp;nbsp;nbsp;私は2列目です</td>
</tr>
<tr>
<td>nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;私は3列目です</td>
</tr>
</テーブル>

Chrome での表示効果は次のとおりです。

IE9での表示効果は次のようになります。

Chrome では 2 つの &nbsp; が 1 つの漢字の幅を占め、IE では 4 つの &nbsp; が 1 つの漢字の幅を占めていることがわかります。
解決:
1. ページのエンコード形式を変更します <meta http-equiv="content-type" content="text/html; charset=gbk">
ページをコンパイルする方法(myeclipse で)

次にIEを右クリックしてエンコード表示形式を変更します

2. (推奨) スペースのある行にフォントを設定します。文字間の間隔が均等になるように任意のフォントを設定します。
のように:

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

<div style="font-family: '宋体'">nbsp;nbsp;nbsp;nbsp;私は2行目です</div>

PS:nbsp;以下を置き換えてください

<<:  JavaScript ESの新機能letとconstキーワードに基づく

>>:  純粋な CSS でカスタムラジオボタンとチェックボックス機能を実装する

推薦する

Vueプラグインの詳しい説明

要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS....

MySQLのカバーインデックスに関する知識ポイントのまとめ

インデックスにクエリする必要があるすべてのフィールドの値が含まれている(またはカバーしている)場合、...

TypeScript のマップされた型とより優れたリテラル型推論について説明します。

目次概要マップされた型を使用して Object.freeze() を構築するマッピングタイプの構文は...

ウェブページ作成によく使われる英語フォント

アリアルArial は、多くの Microsoft アプリケーションとともに配布されるサンセリフ T...

MySQLの日付加算と減算関数の詳細な説明

1. 追加時間()指定した秒数を日付に追加する select addtime(now(),1); -...

MySQL 接続で認証失敗エラーが発生する場合の分析と解決方法

[問題の説明]アプリケーション側では、次のエラーが時々表示されます。メソッド 'mysql_...

MySQL全文インデックスを使用して検索エンジンのサンプルコードの簡易版を実現する

序文全文インデックスを使用できるのは Innodb と MyISAM ストレージ エンジンのみです ...

HTML/CSS の基礎 - HTML コード記述におけるいくつかの注意事項 (必読)

この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...

FileZilla を使用して FTP サーバーに接続するプロセスの図

最初にサーバー上に FTP サーバーをセットアップし始めたとき、接続できないことがわかったので、Fi...

Vue3 における computed の新しい使用例のまとめ

vue3 での computed の使い方。vue3 は vue2 のオプション API と互換性が...

MySQL 5.7.19 のインストールと設定方法のグラフィック チュートリアル (win10)

以下に記録されているように、WIN10システムにMYSQLをダウンロードしてインストールするための詳...

MySQL 8.0 のメモリ関連パラメータの概要

理論的には、MySQL によって使用されるメモリ = グローバル共有メモリ + max_connec...

Vue が DingTalk の出勤カレンダーを実装

この記事では、DingTalkの勤怠カレンダーを実装するためのVueの具体的なコードを参考までに共有...

Ubuntu mysqlログイン名とパスワードを表示および変更し、phpmyadminをインストールする

MySQLをインストールした後、ターミナルでmysql -u root -pと入力してEnterを押...