IEと、他ブラウザの表示がうまく合いません

Question

Dreamweaver CS3、macにてHPを制作中なのですが、safariやクローム、オペラで確認する表示と、 IEで確認する表示が異なり、困っています。

文字詰めやフォントもそうなのですが、IEで表示するとサイドのメニューバーの高さがページによって変わってしまう（広がる）ことに一番困っています。（メニューを選択した際、右側に表示される内容が多くスクロールが発生する場合）
テーブル設定の問題？とも思ったのですが、IEだけなので困っています。

文章での説明分かりづらいかもしれませんが、この現象を回避できる方法をお教え頂ければ幸いです！どうぞよろしくお願いします。

ORUKA1951 · Accepted Answer

DreamWeaberでそのようなページできないはずですが・・・

IEで表示が大きく異なる原因は、互換モードで動作することが最大の要因になる事が多いです。
　IEの互換モードは、他のブラウザを駆逐するためにのかって第一次ブラウザ戦争( http://ja.wikipedia.org/wiki/%E3%83%96%E3%83%A9% … )の名残で、ＩＥは斬新な独自仕様を取り入れてＯＳと抱き合わせで頒布して他のブラウザを駆逐してしまいました。ブラウザによるOS不要を目指したNetscapeを危険と判断したのです。--結果的にその時代は来てしまいましたが--
『互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』と危惧を抱いたW3Cなどによって、『どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』としてウェブ標準が提唱され、多くのブラウザがそれに従う中、ＩＥ勝手の独自仕様で作られたサイトへの対応から、ウェブ標準への対応が大きく遅れました。また、そのようなサイトを利用するために互換モードを持っています。
　★ここまではウェブ開発者は知っておくべき--リンク先を読んでおくこと。

　ＩＥを標準モードで動作させるためにはDOCTYPEスイッチを正しく記述する必要があります。DreamWeaberCS3は古いためデフォルトが異なりますので修正する必要があります。
　DOCTYE宣言を
HTML4.01Transitionalでしたら、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML4.01Strictでしたら、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
と記述することで、他のブラウザと合うはずです。

　⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml )

　なお、
＞文字詰めやフォントもそうなのですが、IEで表示するとサイドのメニューバーの高さがページによって変わってしまう（広がる）ことに一番困っています。
　それ以前の問題も含んでいます。
　そもそも『HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』のですから、スマホのような小さな画面でも、視覚障害者がフォントやそのサイズを指定しても、利用しづらくなったらダメなのです。
　リキッドで表示幅を小さくしてもスクロールが必要になったりはまずいのです。

HTML5を目前にした状況では、HTML4.01strictで作成しましょう。

dragon-man · Answer

ブラウザはHTML+CSSの文法に沿って解釈、表示するソフトです。解釈の仕方（表示の仕方）はブラウザによって幾分異なります。文字フォントはweb側が特定のものを指定してなければ、ブラウザの標準フォントが使われます。Windowsの場合、おそらくMSPゴシックが使われるでしょう。Macの場合は知りません。その表示の仕方（行間、フォント、文字詰めなど）はブラウザによって多少異なります。どれがいいかは好き好きです。ブラウザによって違いが起きないようにするには、webデザインの際フォントを特定のものを指定するべきです。私はメイリオを使っています。今はWindows,Macとも普及しているはずです。

web表示画面以外のメニューバーやタスクバーはHTML文法と無関係です。ブラウザ製造者が自由にデザインでき、ブラウザごとに異なります。これも好き好きです。表示の仕方もオプションなどで変えられるものが多いです。それがブラウザごとに（IEだけが）違うのが気に入らなければ、IEを使わなければいいだけのことです。

「メニューを選択した際、右側に表示される内容が多くスクロールが発生する場合」という意味がいまいちよく分かりませんが、スクロールが発生しないように表示ウィンドウ（Macでは何というのか？）を十分に広げればいいだけのことでしょう。そのもとになるモニタ画面のサイズはいろいろですから、web作成者はそれに見合った大きさにデザインすべきです。出来たら１５インチ程度の小さなモニタを想定して、（少なくとも横方向の）スクロールが発生しないサイズにwebデザインするべきです。そうしないと小さなモニタを使っている人は見づらいので見てくれないでしょう。

ちなみに上部のメニューバーやタスクバーの面積（上下幅）をいちばん小さくできるのはIEだと思っています。

IEと、他ブラウザの表示がうまく合いません

DreamWeaberでそのようなページできないはずですが・・・

ブラウザはHTML+CSSの文法に沿って解釈、表示するソフトです。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング