CSS画像リサイズを使用する際のIE8のバグ修正について

また、このネタですが、だいぶ前に書いた「CSSだけで画像のリサイズを処理する（IE6に対応させて、しかもハイクオリティ）完全版」を使ってWebページを作成していたところ、IE8でおかしな動作をするということが分かりました。

具体的には、下の画像の用に変な余白ができてしまう…

これはmax-widthで画像のサイズを指定したことによって起きていることが分かりました。
（画像自体はリサイズされているけれど、それを包括している要素が無視している）

で、解決法ですが、最も簡単な解決方法はIE8の表示モードを強制的に変えてしまうという方法です。

<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />

以上のタグを＜head＞に埋め込んでやれば、強制的にIE7の表示モードで表示させることができます。
書き込まなくちゃいけないファイルがたくさんあるという場合は、Webサーバに設定して「X-UA-Compatible: IE=emulateIE7」というHTTPヘッダを追加するという方法でもOKです。
詳しくは＠ITのInternet Explorer 8正式版レビューで

それじゃあ根本的な解決にはなっていないので、表示モードは変えずにちゃんと見えるようにする方法を次に書きます。
と言っても、すごく簡単なこと。
リサイズしている＜img＞を包括している要素にwidthの設定をしてやれば、何も問題なく表示されます。
ただし、包括している要素は＜div＞や＜p＞などのブロック要素でないとダメです。
「CSSだけで画像のリサイズを処理する（IE6に対応させて、しかもハイクオリティ）完全版」のサンプルページでやっていたように、＜td＞で囲った場合は＜td＞にwidthを指定しても上手くは動きません。
そのため、＜td＞で囲っている場合はなどでもう一つ囲ってやります。
そして、＜span＞に対してdisplayとwidthを指定してやればいいのです。

<style type="text/css">
.resizeImg {
	width: 200px;
	height: 200px;
	…
}
.resizeSpan {
	display: block;
	width: 200px;
}
</style>

<table>
	<tr>
		<td><span class="resizeSpan"><img src="sample.jpg" alt="sample" class="resizeImg" /></span></td>
	</tr>
</table>

そんだけー

それにしても、IEはそろそろ消えて欲しいなぁ。IEを消すウィルスが蔓延しないのはなぜだろうか…