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

  • 投稿 : 2013-05-18

現象


こんな感じで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モードを使わない

<meta content='IE=EmulateIE7; IE=EmulateIE9; IE=EmulateIE10' http-equiv='X-UA-Compatible'/>

ヘッダーにこれを追加する。
IE8の場合は、IE7モードで表示されるので、IE8関係なくなります。

解決方法 その2 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」

スポンサーリンク