更新日: 2014年9月11日
HTML & CSS

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

<!DOCTYPE html>
<html>
  <head>
    <%# ... %>

    <%= render 'layouts/shim' %>

    <%# ... %>
  </head>
<body>

<!DOCTYPE html>

<html>

<head>

<%# ... %>

<%= render 'layouts/shim' %>

<%# ... %>

</head>

<body>

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

app/views/layouts/_shim.html.erb

<!--[if lt IE 9]>
  <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]-->

<!--[if lt IE 9]>

<![endif]-->

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%以下だっため、私は対応しない方針にして試してはいませんが。