Bootstrap3をInternet Explorer8(IE8)に対応させる

スポンサーリンク

Twitter Bootstrap3 を使ったサイトを、何も対応せずに Internet Explorer8 で表示させますと、見事にレイアウトが崩れます。IE8 の場合、html5 のタグが無視されるのと、media query が無効にされるのが原因らしい。

— 環境 —
Rails 4.1
bootstrap-sass 3.0.2.0

【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました
スポンサーリンク

IE8以下の場合、html5shiv.min.js と respond.min.js を読み込ませる

対応策として Internet Explorer8 以下の場合は、html の head 部で Bootstrap3 に対応させるための JavaScript ファイルを読み込ませるコードを追加します。

Rails 利用時の例ですが、application.html.erb の head 部に、IE8以下に対応するためのコードを追記します。私は、以下のようにパーシャルに切り出しました。

app/views/layouts/application.html.erb

以下がIE8以下の場合に、JavaScriptを読み込ませるパーシャルのビューファイル。

app/views/layouts/_shim.html.erb

Rails を使っていない場合は、上記の _shim.html.erb のコードを、head 内に追記すれば大丈夫だと思います。以上の対策で、Bootstrap3 利用時も IE8 で綺麗にレンダリングされるようになります。

これは、こちら Getting started · Bootstrap の Bootstrap3 の公式ドキュメントに書いてある通りです。

html5shiv.min.js は、html5 の新しいタグをIE8でも認識できるようにする。respond.min.js は、IE8 で media query を使えるようにするためだそうです。

以下参考リンクのおかげで助かりました…感謝。IE8なぜか未だに使ってる人結構多いのですよね。参考リンクの一番下で IE6, IE7 にも対応する方法も書いてあります。ブログの解析を見たところ、IE6 と IE7 は合計でも使ってる人の割合が1%以下だっため、私は対応しない方針にして試してはいませんが。

スポンサーリンク
私は CSS がちょっと苦手なので勉強せねば...
 
スポンサーリンク

Leave Your Message!