IEでも枠線と画像の間に余白を設ける方法は？
Internet Explorerでも、枠線と画像の間にうまく余白を設けるにはどうすれば良いでしょうか。 以下のような方法が考えられます。
- あきらめる
- 標準モードで解釈されるようHTMLを修正する
- 外側にdiv要素を付ける
具体的な方法を順番に見ていきましょう。
解決策１．あきらめる
画像と枠線の間にある余白など、あってもなくても大した問題ではない…という場合は、あきらめるのも良いかも知れません。
FirefoxやOperaなどでは正しく余白が確保されるわけですから、それらのユーザにだけ表示できれば良い…という場合は、何の工夫もしないのも1つの方法です。 ただ、解決はそれほど難しいわけではないので、以下の解決策２・３を試されることをお勧めはします。
解決策２．標準モードで解釈されるようHTMLを修正する
Internet Explorerで、枠線と画像の間に余白が設けられないのは、「互換モード」で解釈されている場合のみです。 「標準モード」で解釈されれば、ちゃんと余白が設けられます。 ならば、「標準モード」で解釈されるようにHTMLを修正すれば済む話ですね。
※IE5.x以下には「標準／互換モード」という描画モードがないので、解決策２での解決は無理です。 また、IE7.0でも「互換モード」で解釈されていればIE6.0と同様の問題が起こります。
■標準モードで解釈されるDOCTYPE宣言を書く
「互換モード」で解釈されるのは、HTMLの先頭に（標準モードとして解釈される）「DOCTYPE宣言」が記述されていない場合です。 ですから、HTMLの先頭（＝1行目）に必要なDOCTYPE宣言を書けば、「標準モード」で解釈されるようになります。
試しに、以下の1行をHTMLの第1行目に挿入してみて下さい。
この記述のことを「DOCTYPE宣言」といいます。そのHTMLが、どんなバージョンのHTMLで記述されているのかを示すために使われます。 上記の場合は「 HTML 4.01 」の「 Transitional（過渡的） 」版を使って記述していることを示しています。 DOCTYPE宣言と描画モードの関係については、記事「大文字・小文字の違いに注意！」などをご参照下さい。
■このDOCTYPE宣言を書いた場合の弊害
DOCTYPE宣言は、省略せずに書いておきましょう。
ただし、これによっていくつかの弊害が出てくる可能性もあります。
今まで「互換モード」での描画を前提としてHTMLやスタイルシートを記述している場合、 いきなり「標準モード」に切り替えると様々な表示が微妙に変わってしまうことがあります。 場合によっては、レイアウトが崩れてしまうこともあります。
もし「標準モード」で解釈されるようにした結果、修正が大変なくらいに表示が崩れてしまった場合は、 この解決策はあきらめて、次の「解決策３」での対処を検討しましょう。
■今後の主流は「正しい解釈結果」である「標準モード」
ただし、「標準モード」での描画が「望ましい描画」です。今後は「標準モード」での解釈（描画）が主流になっていきます。 そちらの方が「正しい解釈をした結果の描画」なのですから当然ですね。 「互換モード」はあくまでも「過去の誤った描画方法との互換性を維持するため」だけに用意されているに過ぎないのです。
ですから、できるだけ「標準モード」で解釈された場合にうまく表示されるよう考えていくようにしましょう。
今後、新しくページを作成する際には、必ず（標準モードとして解釈される）DOCTYPE宣言を最初に記述することをお勧めします。
解決策３．外側にdiv要素を付ける
「互換モード」での解釈（描画）のまま使える対策は、HTMLにdiv要素を加える方法です。 詳しくは次のページで。
