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

とりあえず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ほんとに厄介だなぁ。

Comments

コメントを残す