IE8でfloatした画像が消えるっていう件

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

とりあえずIE爆発しないかなー…(´・ω・`)

仕事で作ったサイトの一部がIE8で見ると消えてました。
↓な感じで。
バナーを並べて背景に色が入ってます。
20131106

で、調べて色々やってみて解決したっぽいのでその覚書を。

HTMLはこんな感じ

CSSはこんな感じ

まず、できるだけ楽をしたい気持ちで常にいっぱいなので、IE6-8でもCSS3セレクタが利用できるようになるというSelectivizr.jsを導入。
結果は直りませんでした。

次に、どうしても楽をしたい気持ちでいっぱいなので、IE8の表示モードを強制的にIE7変えてしまう方法を試しました。
(IE7ではきちんと見えてるので)

結果は直りませんでした…。

駄目だぁ(‘A`)y-~

さらに調べていくとこんな記述を発見。

IE8では、floatしている要素の横幅が0pxのように計算され、その要素の中の要素に、外側の要素に依存する max-width:100%; などの指定があると、中の要素の横幅も0pxになってしまったりするようです。

引用:IE8で画像が表示されない!(twitter bootstarp のときなど) at softelメモ

ほー…ということで、aタグにmax-width設定してみました。

結果、直りました。IEほんとに厄介だなぁ。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA