Bootstrap3をIE8で使う時に注意すること - Blog.おにぎりたまごうぃんなー

3からIE6が切られたのは知っていたので、IE8なんて楽勝じゃん！と思っていましたが

IE8がまだいい子だという私の認識は完全に間違っていました。
— スズキユキ (@s12bt) October 21, 2013

DOCTYPEをhtml5にして、jquery呼んで、bootstrapのcssとjs呼んで、動くじゃんと。Chromeでひと通り作ったあとにIEでの動作検証したら全然動かなかった。きぃぃぃ。
そして、IEが悪いわけじゃなくて、ドキュメントをちゃんと読んでなかった私が悪かったんです。。。
同じ過ちを起こさないためにメモ。

Bootstrap3のサポートブラウザは以下。

Supported browsers

Specifically, we support the latest versions of the following:

Chrome (Mac, Windows, iOS, and Android)

Safari (Mac and iOS only, as Windows has more or less been discontinued)

Firefox (Mac, Windows)

Internet Explorer

Opera (Mac, Windows)

Unofficially, Bootstrap should look and behave well enough in Chromium for Linux and Internet Explorer 7, though they are not officially supported.

http://getbootstrap.com/getting-started/#browsers

htmlshiv5.jsをhead内で読み込む

html5shiv - HTML5 IE enabling script - Google Project Hosting

IE8だとhtml5の新しいタグが無視されてしまうので、認識してもらうようにする。
タグを無視っていうことは、そこについてるclassとかidとかも丸っと無視されてしまうので
Bootstrapのモジュールが意図したとおりに動かない。

respond.jsを読みこむ

IE8でmedia queryを使えるようにするために入れる

ここまでやるとこうなる。(http://getbootstrap.com/getting-started/#template)

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>