解決策３．外側にdiv要素を付ける
画像に直接枠線を引くから問題になるわけです。ですから、画像の外側にdiv要素を用意して、そのdiv要素に対して枠線を引けば、問題はなくなります。
デザインのためだけにHTMLを修正することになるので、あまり望ましい方法だとは言えません。 しかし、この方法なら「互換モード」での解釈（描画）のまま使えます。
以下は、画像の外側にdiv要素を配置して、そのdiv要素に対してスタイルシートで装飾した例です。 画像と枠線との間に、1ピクセルの余白が確保されていることがお分かり頂けるでしょう。 Internet Explorer 6.0や7.0の「互換モード」でも、同様に表示されます。
HTMLとスタイルシートのソースは次の通りです。
HTML：div.imageblock {
border: 1px solid green;
padding: 1px;
width: 320px;
}
</style>
ここでのポイントは、div要素に対するスタイルで width プロパティを使っている点です。 widthプロパティには、画像の横幅と同じサイズを指定します。
widthプロパティは横幅を指定するプロパティですが、そのサイズには、枠線の太さや余白の大きさは含みません(※)。 ですから、widthプロパティに画像と同じサイズを指定すれば、望み通りの表示を作ることができます。 余白の大きさは、paddingプロパティの値を修正すれば良いだけです。
※[補足] IEでは実は解釈が異なるのだけど、うまくいく理由
「互換モード」のInternet Explorerでは、このwidthプロパティが示す横幅の解釈が誤っています。 本来は、枠線の太さや余白のサイズは含まないサイズを表すのですが、「互換モード」のIEでは、枠線の太さと内側の余白のサイズを含むサイズとして解釈されてしまいます。
ですから、widthプロパティに「画像の横幅と同じサイズ」を指定すると、IEの（互換モードでの）解釈では「画像の横幅よりもdiv要素の横幅の方が狭い」ように解釈されてしまいます。
このままでは（枠線の幅が画像の幅よりも狭くなってしまうため）問題があるように思えますが、実はうまくいきます。 なぜなら、IEは、div要素の横幅よりも内容の横幅の方が大きい場合には、スタイルシートの指定を無視して、勝手にdiv要素の横幅を拡張するからです。 それによって、必要なだけの横幅が確保されるため、うまく表示できるのです。
おわりに
今回は、画像に枠線を加える際に発生する、Internet Explorerに限った問題の解決方法をご紹介しました。
最後の「解決策３」はあまり望ましい方法ではありませんが、どうしてもこのようなテクニックが必要になる場合もあります。 参考にして下さい。
望ましいのは「解決策２」のように、標準モードで描画させることです。 できるだけ、正しい文法で記述するよう心がけていれば、今後のウェブ製作が楽になるはずです。
