Twitter Bootstrap利用サイトでIE8だとimgが表示されない

投稿日：

ie8_picture作ったサイトを念のためIE8で確認したら画像が表示されないので対応したときの覚書。

環境： Bootstrap 3.3.7, WordPress 4.7.2

 

１．【準備編】Windows7 + IE8の環境を作る（Hyper-V）

公式サイトでIE8を搭載した仮想マシンがダウンロードできる。

認証が必要。デスクトップに書いてあるのでそのままcmdで叩く。

 

２．IE8だけ読み込むCSSを用意

試した結果表示されない原因はdisplay: tableを指定していたから。

画像は基本的に中央揃えにしたかったので、次のように設定していた（lessを使ってる）。

.img-responsive {
    &:extend(.img-responsive all);
    display: table;
    margin: 0 auto;
}

 

他のに影響与えないでIE8のみに対応したかったので、IE8だけ読み込むCSSを用意して、そちらで対応することにした。

bootstrapを使うときにお約束の記述に追記（WordPressの関数を使ってる）。

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<link rel='stylesheet' href='<?php echo get_template_directory_uri();?>/assets/css/ie8.css' type='text/css' />
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

ie8.cssはこんな感じ。

.img-responsive {
    /* img tag disappear in IE8 when using display:table */
    display: block;
}

あとの細かいところは気にしない。

 

< Related Posts >