private.SubscribedunsubscribeSubscribeSubscribeくらげだらけ2009-07-16CSS画像リサイズを使用する際のIE8のバグ修正についてWebCSSまた、このネタですが、だいぶ前に書いた「CSSだけで画像のリサイズを処理する(IE6に対応させて、しかもハイクオリティ)完全版」を使ってWebページを作成していたところ、IE8でおかしな動作をするということが分かりました。具体的には、下の画像の用に変な余白ができてしまう...これはmax-widthで画像のサイズを指定したことによって起きていることが分かりました。(画像自体はリサイズされているけれど、それを包括している要素が無視している)で、解決法ですが、最も簡単な解決方法はIE8の表示モードを強制的に変えてしまうという方法です。/&gt;以上のタグを<head>に埋め込んでやれば、強制的にIE7の表示モードで表示させることができます。IE=emulateIE7」というHTTPヘッダを追加するという方法でもOKです。8正式版レビューでそれじゃあ根本的な解決にはなっていないので、表示モードは変えずにちゃんと見えるようにする方法を次に書きます。言っても、すごく簡単なこと。リサイズしている<img>を包括している要素にwidthの設定をしてやれば、何も問題なく表示されます。包括している要素は<div>や<p>などのブロック要素でないとダメです。「CSSだけで画像のリサイズを処理する(IE6に対応させて、しかもハイクオリティ)完全版」のサンプルページでやっていたように、<td>で囲った場合は<td>にwidthを指定しても上手くは動きません。そのため、<td>で囲っている場合はなどでもう一つ囲ってやります。<span>に対してdisplayとwidthを指定してやればいいのです。/&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;そんだけーそれにしても、IEはそろそろ消えて欲しいなぁ。Blog|ブログを報告する。