ブラウザ間の表示の違いについて

このQ&Aのポイント
  • ブラウザ間での表示の違いについて調査しました。
  • 使用するブラウザによって文字の大きさの違いや文字化けが発生することがあります。
  • スタイルシートの調整だけでは解決しない場合もありますが、ブラウザごとに表示を合わせる方法も存在します。
回答を見る
  • ベストアンサー

ブラウザ間での表示の違いについて

はじめまして! firefoxでfc2のホームページサービスでHPを作ったのですが IEで見てみたところ、文字の大きさの違い、文字化けなどが多くみられて スタイルシートとか調べてもその場で調べただけじゃ全然効果がなくて… 私の調べ方が悪いのもあるんですが…申し訳ないです firefoxでつくったのでできればfirefoxの表示に合わせたいのですがそういった方法はあるのでしょうか… 今絶対表示をあわせたいのはIEとfirefoxで お恥ずかしながらつくったHPを載せておきます(ソース確認用)http://vector1525.web.fc2.com/… 分かる方いらっしゃいましたら回答よろしくお願いします…!

  • CSS
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

どうも。こんばんは。 IEがFirefoxと同じような表示ならずに困っているということですね。 IE9では見れていないのですが、IE8でたしかに文字化けと文字サイズの差異が見受けられました。 ■1.文字サイズが違う △原因 互換モードで表示されている ○解決方法 下記1行をHTMLの1行目に入れてください。 (<html>タグより上) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> トップページはDOCTYPE宣言が入っていたみたいですが、他の多くのページに記述されていませんでした。 上記1行を各ページに入れれば、標準モードで動くので解決には繋がると思います。 □蛇足 これが入っていないとIEでは互換モード(昔のブラウザに合わせた表示)が選ばれてしまうみたいです。 そのため、CSS2として解釈して欲しいところがCSS1として解釈されます。 参考 http://kumacrow.blog111.fc2.com/blog-entry-279.html 昔の表示だと文字が同じx-smallでも少し大きくなってしまいます。 上記記述を行うとXHTMLとなるので、 <img>や<br>等のタグを<img src="xxx.jpg" alt="xxx" />や<br />と記述しなければいけなくなります。 しかし、間違って<img src="xxx.jpg" alt="xxx">としても動いちゃいますが。 ■2.文字化け ○解決方法 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> のいずれかを <head> </head> の間に入れてあげてください。 文字コードが指定されていないと、IEでは意図していた文字コードで自動判別できないようです。 □蛇足 入れる際や保存する際は文字コードが正しいかチェックして下さい。 文字化けしたまま保存するともとに戻せません。 あと、色々ページを見たのですが、文字コードがバラバラみたいです。 どうしても別の文字コードで表示させなければいけないということでないのなら、サイト内では統一しておいたほうが混乱なくサイト作りできると思います~。 サイト作り頑張ってください~。

samsara0120
質問者

お礼

お二方の回答のおかげで無事に文字化け、ブラウザ間の文字の大きさの違いを克服することができました!!!!!! 長く悩んでいた問題だったのでほんとう感謝しても感謝しきれません…!! お忙しい中この質問に対し時間を割いてくださってありがとうございました!!!!

その他の回答 (1)

  • tyatsumi
  • ベストアンサー率58% (30/51)
回答No.1

index.html, top.html は文字コードがEUC-JPのようです。 main.html はUTF-8のようです。 文字コードをUTF-8に統一すべきですね。 そしてmetaタグでcharsetの指定をしたほうがよいと思います。 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

samsara0120
質問者

お礼

無事文字化けをなくすことができました!!!!!!! お忙しい中、 本当にありがとうございました!!!!!!!!

関連するQ&A

  • ブラウザの違い?それとも・・・自動で表示されない

    ホームページにアクセスした時の違いで困ってます。 (ブックマークのURLは例) http://honyarara.web.fc2.com/です) Firefoxでブックマークしたページにアクセスすると http://honyarara.web.fc2.com/index.htmlまで書かなくても自動でindex.htmlを表示してくれますが (お気に入りのURLは上記と全く同じ http://honyarara.web.fc2.com/ になってます) IE8でお気に入りに登録した同じページにアクセスすると http://honyarara.web.fc2.com/ のままでは 「このファイルを保存しますか、または開くためのプログラムをオンラインで検索しますか?」と 出てしまい、index.htmlが表示されません お気に入りのURL又はURLバーを書き換えて http://honyarara.web.fc2.com/index.html とすると 正常に表示はされるのですが・・・。何故このような事になるのか詳しい方がいらっしゃいましたら 教えていただけるとありがたいです。どうか宜しく御願い致します。 つまりIEでアクセスしてもFirefoxでのアクセス時と同じように index.html 無しのURL http://honyarara.web.fc2.com/ にアクセスした時に「このファイルを保存しますか、または 開くためのプログラムをオンラインで検索しますか?」表示が出ずにHPが表示できるように するにはどうしたら良いか、宜しく御願い致します。 ※ちなみに .htaccess の設定はDirectoryIndex index.html にしています。

  • ブラウザによってページが表示できません

    自作のホームページがブラウザによって表示できません。 firefox3.6,safari4では表示されます。 google chromeでは表示されないページがありますが、更新すると 表示されます。 lunascape6,IE8,sleipnir2.9では真っ白になり、まったく見れません。 ページはテラパッドで作成しました。 どこに原因があるのでしょうか? http://universitymath.web.fc2.com/index.html

    • ベストアンサー
    • HTML
  • FireFox14で正常なのが、IE9で文字化け

    ご常連のORUKAさんに御指導しただき サンプルではありますが、試験的に適当なページを作ってみました。 一通り終って休憩しようとしたところ問題を発見 問題は二つです。 ~~~~~~~~~~~~~~~ 自分はいつもFireFoxをつかっているのですが、なんとFireFoxにて、FC2ホームページのファイルエディアで作ったHTMLサイトがIEでは正常に表示されません! サイト→http://cssprac.web.fc2.com/index.html CSS→http://cssprac.web.fc2.com/style.css ●1、文字化け 文字化けにはmetaを入れるといいと言う情報を探し出したのでさっそく<title>の前に入れましたら、なんと!! 書き入れて保存すると、書き入れたばかりのmetaタグとさらに<title>部分までいっきに消えてしまいます。 ●2、Firefoxでは画像内側が正常にホバーされてピンク色の枠がでるのが、IEでは出ません。そのかわり、IEではfc2.comというリンク文字がなぜかホバーされてピンク枠がかります。 一体何が起きているのでしょうか。この2点を修正する方法を教えてください。 なにとぞご教示ください・・・。お願いします。

    • ベストアンサー
    • CSS
  • ブラウザの表示を統一したい

    IE7の表示に他のIE8、firefox safariを統一したいのですがどうしたらよいのでしょうか。 IE7ではメニュー部分が縦に文字がずれることなく並んでいるのですが、IE8や他のブラウザで見ると、最新記事や月別アーカイブ、リンク等で表示しているピンクの文字が他より内側に入り込んでしまいます。 これをIE7の様に縦に揃った表示にさせたいのですが、テンプレートのスタイルシートをいじっても治りません もし解る方がいらっしゃいましたらどうかよろしくお願いいたします。

  • winIEではOKなのに、macIEでは画像がずれる

    現在、スタイルシートを使ってホームページを作っています。 winのIEでは画像やテキストがきちんと収まっているのに、 macのIEだと画像だけずれてしまい、下のほうに表示されてしまいます。 なにが問題なのでしょうか? 説明が下手なので、急ぎで http://phpstation.fc2web.com/setsubi01.html にページをアップしてみました。 (ちょっとjavascriptにエラーがありますが気にしないで下さい。) 画像も少ししかアップしていないので、表示されない部分もありますがこんな感じです。 http://phpstation.fc2web.com/css/kotobuki.css にスタイルシートがあります。 よろしくお願いいたします。

  • ブラウザによってFrameがズレてしまう。

    IE7 IE6 FireFox それぞれのブラウザでFrameの見え方が異なってしまいます。 ↓ http://nanzya.web.fc2.com/ 具体的には、上のFrameと下のFrameがズレて表示されます。 IE6ではちゃんと表示されていたものが、IE7やFireFoxではズレてしまいます。 (下Frameをscrolling="auto"にしているとズレるようです。) (上Frameはscrolling="no") すべてのブラウザで表示を統一するには どうすればいいでしょうか。 どなたかご教示ください。

  • ブラウザ表示について

    ブラウザ表示について DreamWeaverCS4でホームページをつくってfirefoxやIEやsafariなどで確認すると 文字をヒラギノで指定してしてたのがIEでは明朝になったり ケイ(ボーダーライン)を引いてたのがsafari では表示されなかったり 統一した表示にしたいのですがコードをどのように 書けばいいのでしょうか?

  • NN4.7はホームページ検証ブラウザにいれるべきですか

    ホームページをつくりましたが、macOS9のNN4.7で確認したところ、スタイルシートのborderがききません。それに文字化けをします。NN4.7はNN7とNN6.2を考えると最新のブラウザから数えて3番目のブラウザですが、ただしく表示するブラウザとしてborderと文字化けを調整するべきでしょうか。 macでは OS9-IE5,NN4.7 OSX-IE6,NN7 winでは win2000-IE6 winXP-IE6 で検証しています。 検証すべきブラウザで追加すべきものがあれば教えてください。

    • ベストアンサー
    • Mac
  • ブラウザごとに違うページを表示

    ホームページをIEで表示しながら作っているのですが、Mozilla Firefoxで表示したら一部のページが表示がおかしくメニューやトップの文字が重なってページからはみ出したりもして原型を留めていないのですが、Mozilla Firefox用に別のページを作ってMozilla FirefoxはIEとは別のページに自動でいくようにしたいのですがどうすればいいのか困っています。 どうやれば出来ますか。

  • ブラウザと文字サイズ

    あくまで自分の閲覧環境です (Win98 IE6 FireFox1.0 IEではスタイルシートを使用することで HPを表示するときにはじめから サイズを指定して表示するるのにくわえ 閲覧時のサイズ変更ができません しかし、FireFoxですと ブラウザの設定が優先されてしまします FireFoxでなんとかIEのように 表示することはできないでしょうか どうHPを改造すればいいのかおしえてください *IEの表示を完全に表示できないのは 承知の上ですので 『あきらめてください』や 『表示は閲覧環境による』などは 必用としていませんので 出来ればやめていただきたいと思います 説明に必用ならば結構ですが… あくまで『FireFoxの表示をIEに近づける方法』が 勉強のため聞きたいだけですのでね^^; 詳しい方、よろしくおねがいしますm(_ _)m