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 でカスタムラジオボタンとチェックボックス機能を実装する

推薦する

MySQL のスケジュールされた完全なデータベースバックアップ

目次1. MySQLデータのバックアップ1.1、データをバックアップするためのmysqldumpコマ...

ウェブサイトがhttpsを有効にした後のSSLのセキュリティ構成と検出

最近のウェブサイトでは SSL を有効にするのが標準となっています。ただし、SSL を設定した後も、...

JavaScript のカンマ式が含まれている場合について

JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...

ウェブデザインと制作の一般的な原則をまとめる

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...

React useMemo と useCallback の使用シナリオ

目次メモを使うコールバックの使用メモを使う親コンポーネントが再レンダリングされると、そのすべての要素...

MySQL killコマンドの実行原理の詳細な説明

目次キル命令実行原理命令実行特性クエリ実行の強制終了の原則接続終了の実装原則中断される可能性はありま...

MySQL インフラストラクチャ チュートリアル: クエリ ステートメント実行プロセスの詳細な説明

序文私は以前から、SQL 文がどのように実行され、どのような順序で実行されるのかを知りたいと思ってい...

JS配列の一般的な方法とテクニックを学び、マスターになりましょう

目次splice() メソッドjoin() メソッド逆() メソッドevery() メソッド削減()...

JavaScriptのURLオブジェクトとは何かについて話しましょう

目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...

HTMLはキャンバスを使用して箇条書きスクリーン機能を実装します

導入最近、大きな課題をこなす際に、弾幕プレイヤーを作る必要がありました。他の人のソースコードを借りて...

JSでよく使われるデータ処理方法

目次DOM処理配列方法要約するDOM処理DOM はドキュメントの構造化された表現を提供し、スクリプト...

VueプロジェクトにPWAを導入する手順

目次1. 依存関係をインストールする2. vue.config.js ファイルで pwa を設定しま...

CSS クロスブラウザ スタイルのバグのデバッグについて

まず最初に、適切なブラウザを選択します。私が Chrome を選択したのは、その強力なデバッグ ツー...

GolangでMySQLデータベースのバックアップを実装する方法

背景Navicat は、最高の MySQL 視覚化ツールです。ただし、ビューのインポートとエクスポー...

MySQLとElasticsearch間のデータ非対称性問題の解決策

MySQLとElasticsearch間のデータ非対称性問題の解決策jdbc-input-plugi...