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

推薦する

Linux サーバー上で複数の SVN リポジトリを構成するプロセスの詳細な説明

1. 指定されたディレクトリにリポジトリを作成し、ディレクトリ全体を保存してください。この記事のサン...

Vueはカスタムツリーコンポーネントを再帰的に実装します

この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有し...

Tomcatでcatalina.batがUTF-8に設定されている場合、コンソールに文字化けした文字が表示されます

1. catalina.bat は UTF-8 に設定する必要があります。UTF-8 に設定しないと...

入力選択スタイルを変更する CSS 疑似クラスのサンプルコード

注: この表はW3Schoolチュートリアルから引用したものです疑似要素の分類と機能: 入力選択スタ...

CSS が最初のサイクルで画像を読み込むために @keyframes を使用するときに発生するホワイトギャップの問題 (フラッシュ画面) をすばやく解決します。

問題の説明: CSS アニメーション プロパティを使用すると、ループが最初に読み込まれたときに白いギ...

CentOS 7.6 への MySQL 5.7 GA バージョンのインストール チュートリアル図

目次環境の準備環境の準備mariadbをアンインストールする rpm -qa | grep mari...

HTML チュートリアル: 順序付きリスト

<br />原文: http://andymao.com/andy/post/103.h...

Linux コマンドにおける Ctrl+z、Ctrl+c、Ctrl+d の違いと使い方

Linux で Ctrl+c、Ctrl+d、Ctrl+z はどういう意味ですか? Ctrl+c と ...

HTML の div と span の違い (共通点と相違点)

共通点: DIV タグと SPAN タグは、コンテンツ全体を非表示にしたり、コンテンツ全体を移動した...

Ubuntu 18.0.4 MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.20 のインストールおよび設定方法は、参考としてグラフィック チュートリアルにま...

Docker 経由で Redis 6.x クラスターをデプロイする方法

システム環境: Redis バージョン: 6.0.8 Docker バージョン: 19.03.12シ...

Node.js を使用して png 画像に透明なピクセルがあるかどうかを判断する方法

背景PNG 画像は jpg 画像よりも多くのストレージスペースを占有しますが、PNG 画像の品質は大...

CentOS のファイルと権限の基本操作チュートリアル

序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...

MySQL 上級学習インデックスの長所と短所、使用ルール

1. インデックスの利点と欠点利点: 高速検索、高速グループ化および並べ替えデメリット: ストレージ...

入力できない無効な値はアクションレイヤーに渡すことができません

フォームを入力不可にしたい場合は、フォームを次のように設定します。コードをコピーコードは次のとおりで...