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="">
コメント