- ベストアンサー
同じIE8なのに機種によってmarginが効かない
- MacとWindowsでの表示の違いについて
- 同じIE8で表示しているのに違いが出る理由
- 解決策について
- ccsosxccsosx
- お礼率100% (1/1)
- ブラウザ
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
IEは、互換モードと標準モード(及び中間のものも)がありますが、IE8ではデフォルトのモードを切り替えることができます。 それを無効にして、標準モードで動作させるため <meta http-equiv="X-UA-Compatible" content="IE=8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> を入れておくと良いです。 なお、そのような問題を避けるために <body> <div class="header">ヘッダー部分</div> <div class="section">インナー（サイトのメイン）部分</div> <div class="footer">フッター部分</div> </div> </body> に対して、 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名で・・ 外枠は要らないのではないかと・・・。必要なら<div class="article"> HTML5なら<article>で囲む。wrapとかinnerなんて書かない。<font color="red">がダメだから<span class="red">とするのと大差ない。<strong>としておいて、スタイルシートでstrong{color:red;}とすべきなのと同じです。
お礼
なるほど、互換モード、標準モードというのがあるのですね。 このページは、CSSをこれから覚えようとしていた時に、よく分からないまま見よう見まねで組んだものがずっとそのままになっていました。 独学で自分のやり方が定着してしまったのも、良くなかったと思います。 より適切になるように、ORUKA1951さんの回答を参考にして、これから変えて行きたいと思います。 答えて頂いてありがとうございます。すっきりしました。