2017年2月15日水曜日

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

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

環境: Bootstrap 3.3.7, WordPress 4.7.2

 


1.【準備編】Windows7 + IE8の環境を作る(Hyper-V)

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

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

 


2.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 >

コメントを投稿
Related Posts Plugin for WordPress, Blogger...

Blog Archives