質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

922閲覧

HTMLで同じテキストを表示しているのに、IE11とChromeで表示が異なってしまう。

ImPathy

総合スコア29

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/06/18 10:24

Javaアプリケーションから取得したテキストファイルの内容をHTMLで表示する、というプログラムなのですが、IE11とChromeで表示が異なってしまい困っています。(Chromeの表示が正です。)

HTML

1<html><head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 3 <meta http-equiv="content-style-type" content="text/css"> 4 <meta http-equiv="content-script-type" content="text/javascript"> 5 <meta http-equiv="content-language" content="ja"> 6 <meta http-equiv="Pragma" content="no-cache"> 7 <meta http-equiv="Cache-Control" content="no-cache"> 8 <meta http-equiv="Expires" content="0"> 9</head> 10 11<body onhelp="return false;"> 12<div id="mytext"><pre> xxxx-xxxxxx-xxxxx 13 xx-xx-xx xx・xx ああ999 QQQ9-99* 14 ああああ ああああ9999 アアアアアアQQ 999-1 15 16 9あ 17 ああああ 000000 ああ 18 ああああああ 999999 あああ 000000 19 あああ 000000 20 あああ 000000 21 あああ 000000 22 あああ 000000 23</pre></div> 24 25 26<script id="jwd_siteplus_common" src="http://cdn.jword.jp.estart.jp/pub/siteplus/_js/siteplus_common.js?rnd=4314375" charset="UTF-8"></script></body></html>

このファイルをhtmlとして保存して、実際に両ブラウザで見ていただけるとわかりやすいと思います。IE11だと妙にガタついてしまっており、見づらくなってしまっています。

・なぜこのようになってしまうのか?
・Chromeと同等の表示をする方法はないか?

ご回答宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/06/18 10:40

「IEは捨てる」という選択肢を。
ImPathy

2021/06/18 10:49

IEの使用は絶対条件なんですよね…。 捨てられるものなら全力で投げ捨てたいところなんですがw
m.ts10806

2021/06/18 10:54

まぁ特に指定してなければブラウザのデフォルトに依存するのはどんなプロパティでも同じなので、そこは「明示する」しかないかなと。
ikadzuchi

2021/06/18 15:05

「妙にガタついてしまっており」という状況が何を指すのか分かりません。 画像を提示してください。 特にフォントが指定されていないようなので、あなたの環境でどのように表示されているかは私には分かりません。
ImPathy

2021/06/21 01:19

>m.ts10806さん そうですよね。ありがとうございます。 解決策が見つかったのでクローズとさせていただきますね。
guest

回答2

0

なぜこのようになってしまうのか?

フォントもレンダリングエンジンも別物だしデフォルトのスタイルも異なるので、違って当然です。

Chromeと同等の表示をする方法はないか?

完全に同じにすることはできないので、できるだけ差異を少なくするということでしょうね。
そのためにできることは

  • リセットCSSでレイアウトの初期状態をできるだけ同じにする
  • CSSでレイアウトを作り込む
  • 可能ならフォントを同じものにする

くらいでしょうか。
テキストのレイアウトも<pre>で整形しようとなどせずにCSSを駆使するべきですね。

投稿2021/06/18 10:42

itagagaki

総合スコア8402

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ImPathy

2021/06/18 10:51

レイアウトがファイルによって全く異なる為、作りこみは厳しいです。 リセットCSSやフォントについては、一度試してみようかと思います。ありがとうございます。
runnynose

2021/06/18 11:29

reset.cssの他に、クロスブラウザでなるべくデフォルト状態を均等に保つNormalize.cssというものもありますので、こちらもぜひ検討してみてください^^ https://necolas.github.io/normalize.css/
ImPathy

2021/06/21 05:07 編集

>runnynoseさん ありがとうございます。一通り試してみたものの、結局どれも解決には至りませんでしたが、解決策は見つかったのでクローズとさせていただきます。
guest

0

自己解決

htmlの文字コードがutf-8、読み込むテキストファイルの文字コードがShift_JISだったのですが、読み込み時の文字コードにShift_JISを明示的に指定、及びhtmlの文字コードをShift_JISにして統一することでレイアウト崩れが起きなくなりました。皆様ありがとうございました。

投稿2021/06/21 01:23

ImPathy

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問