IE8で画像やdiv内の要素が表示されない場合の対応

2013/05/18

code

現象

こんな感じでDIV要素に囲まれている画像やその他の要素が表示されない（消える）という現象です。
有名らしく、検索したらたくさん出てきます。

画像サイズ(width,height)を指定してても、表示されないんですね・・・。

原因

10.3.6 Floating, replaced elements
If 'margin-left' or 'margin-right' are computed as 'auto', their used value is '0'. The used value of 'width' is determined as for inline replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#float-width

shrink-to-fit

CSS2 仕様では、要素の横幅が明確ではないと、フロートを指定された要素の横幅は常に "0" とみなされます（CSS2.1 仕様では、width : auto ; であれば、横幅は 0 ではなく、"shrink-to-fit" width と呼ばれる、｢内容にぴったりと合うように縮んだ｣幅になるとあります）。

UA 側の実装は横幅が指定されていなくても、適当な領域を勝手に確保するようになっているようです（これが、一応の shrink-to-fit width のようですが振る舞いは不安定）。

なぜ、IE8では、画像が表示されないことがあるのか - ミショニポー

IE8の仕様です。
バグでも独自仕様でもなさそうな感じですね・・・(^^;

解決方法

max-width や　min-widthを付加するとうまくいくようです

解決方法　その1　IE8モードを使わない

解決方法　その２ CSSを使う

上手な解決方法ではないと思いますが、私が行った方法です。

max-widthを付ける

画像にwidthと同じ大きさの値をmax-widthとしてつけると表示されるようになります。

.separator img[width="200"]{
  max-width: 200px;
}

width幅が明示的に書いていて、統一されていたので上記のように書くと表示されるようになりました。

min-widthを付ける

div側にmin-widthを付けると、その内部に含まれていたiFrameが表示されるようになりました。

.entry-content div{
  min-width: 130px;
}

IE8だけにCSSを適用したい

・CSSでIEの特定バージョンだけに対応する簡単な方法
・IE6/IE7/IE8/IE9に別々のスタイルシートを適用する「CSS hacks」

現象

原因