どうも、最近涼しいせいか風邪を引きかけているよっしぃーです。

テストしている時にIE8の画像が消えてしまっている現象が起きていたので、問題と解決方法について探りました。

 

問題
floatをかけた要素の中にimgを入れている。

どうもmax-width:100%が原因で、要素の中身がimgだけだとwidthが0pxになるみたい
レスポンシブの対応だったりで、このスタイルをトルわけにはいきませんよねぇ・・・

解決方法
imgにmax-widthを指定してあげる。

[html] <img src="hogehoge" width="60" height="60" max-width="60" alt="">[/html]

みたいな感じですね。

また、他にもimgのwidthとheightを書かないというのもありました。

[html] <img src="hogehoge" alt="">[/html]

どういう仕組なんでしょうねぇ。。。
ただ、これだと倍サイズで書きだしたものを半分に表示したい!
ってときには使えませんね(-_-;)

 

場面に応じて対応しましょう(・ω・)

 

今回お世話になった参考サイト