同じIE8なのに機種によってmarginが効かない

Question

Mac OS Xで自サイトを制作しています。
Windows XPもあるので、確認しているのですが、その限りではおかしい所は見当たりません。

ところが、他の方のWindowsで見た時に、marginが効かずに、ヘーダーのdivとインナーのdivがぴったりとくっついてしまっている部分があります。

いろんなWindowsで見て、全てIE8で確認しているのですが、機種によって（？）離れたりくっついたりと違いが出ます。
効くものは効くし、効かないものは効かないという感じです。

ブラウザの種類やバージョンの違いでこうなるのはまだ分かるのですが、同じIE8で見ているのにこのような違いが出るのはなぜなのでしょうか？
また、この問題を解消して、ちゃんとスペースが空くようにするには、どこを変えると良いのでしょうか？

自分のWindows環境ではちゃんと表示されているので治すに治せません。
ご教示お願いします。

body {
margin: 0;
}

#wrap {
width:802px;
margin:0 auto;
}

#header {
padding:16px;
}

#inner {
margin:16px 0;
padding:0 8px;
}

#footer {
padding:16px;
}

背景色指定など、直接関係しないものは省略しています。

<body>
<div id="wrap">
<div id="header">ヘッダー部分</div>
<div id="inner">インナー（サイトのメイン）部分</div>
<div id="footer">フッター部分</div>
</div>
</body>

inner側でmarginを上下に設定しているのが問題なのでしょうか。
しかし、それでもinnerとfooterの間はちゃんと16px分空いているのです。
なのに、headerとinner側に限って空いたりくっついたりするというのが分かりません。

インナー（サイトのメイン）部分

inner側でmarginを上下に設定しているのが問題なのでしょうか。しかし、それでもinnerとfooterの間はちゃんと16px分空いているのです。なのに、headerとinner側に限って空いたりくっついたりするというのが分かりません。

ORUKA1951 · Accepted Answer

IEは、互換モードと標準モード(及び中間のものも)がありますが、IE8ではデフォルトのモードを切り替えることができます。　それを無効にして、標準モードで動作させるため　を入れておくと良いです。なお、そのような問題を避けるために

インナー（サイトのメイン）部分

に対して、 html,body{margin: 0;padding:0;} div.header,div.section,div.footer{width:80%;margin:0 auto;} div.header>*,div.section>*{margin:16px;} div.section{margin:16px 0;} div.section>*{margin:0 8px;} と、paddingを使わないことで互換モードと標準モードの差をなくすことができます。サンプルは、文書構造を示すようにHTML5の新しい要素名( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )にしてあります　idは、詳細度が高く実際にスタイルシートを利用するときに難しくなります。できればclass名で・・　外枠は要らないのではないかと・・・。必要なら

　HTML5なら

で囲む。wrapとかinnerなんて書かない。がダメだからとするのと大差ない。としておいて、スタイルシートでstrong{color:red;}とすべきなのと同じです。

同じIE8なのに機種によってmarginが効かない

IEは、互換モードと標準モード(及び中間のものも)がありますが、IE8ではデフォルトのモードを切り替えることができます。

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

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

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

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