SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

IE8で画像が表示されない!(twitter bootstarp のときなど)

問題

twitter bootstarp を使って、.thumbnails でサムネイル画像を並べていました。

こんな風にして、ほとんどのブラウザで大丈夫なのに、

IE8のときだけ、こうなるんです。IE7は大丈夫なのに、IE8で画像が全然見えません。

答え

IE8特有の現象のようです。

CSS2の仕様書のこの辺 “shrink-to-fit” widthに関連するようですが、

floatした要素の横幅の問題と、その中にある要素に対しての「max-width:100%;」の指定などが原因となっているようです。

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

問題の表示されない画像は、こうしてもだめ

<img src="画像のURL" width="123" alt="">

こうしてもだめ

<img src="画像のURL" width="123" height="123" alt="">

こうしてもだめ

<img src="画像のURL" style="width:123px; height:123px;" alt="">

ここまでやって、原因となっている max-width:100% を上書きしてやると、ようやく画像が表示されます。

<img src="画像のURL" style="max-width:123px; width:123px; height:123px;" alt="">

関連するメモ

コメント