Notice: jetpack_enable_opengraph の使用はバージョン 2.0.3 から非推奨になっています! 代わりに jetpack_enable_open_graph を使ってください。 in /virtual/id696g/public_html/blog.696.jp/wp-includes/functions.php on line 3830

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

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

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
By | 2013-12-11T14:31:28+00:00 11月 6th, 2013|memo, txt|0 Comments

コメントを残す

Shares