Blog.おにぎりたまごうぃんなー

Suzuki Yuki@s12bt おべんと箱みたいに色々つめこみたい。仕事とかデザインとか料理とか好きなもののことを書きます。

Bootstrap3をIE8で使う時に注意すること

Tech

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

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>

jQueryのバージョンは1.X系を使うこと！！！！！！

これが一番ハマった。

jQuery2.Xから、IE6, 7, 8のサポートがされていません。
jQuery 2.0 Released | Official jQuery Blog


border-radiusが使えなかったり、アニメーションが微妙な動きだったり、rgbaのa値がきかなくて透明度がうまく使えないとか、placeholderが使えなかったり色々あるけど、ひと通りは動いた。

結論

  • ドキュメントはちゃんと読みましょう
  • ダウンロードしてきたファイルにひと通り揃ってるんだからきちんと確認しましょう
  • それでもIEハックが必要な場面はありました



実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~