LoginSignup
0

More than 5 years have passed since last update.

IE8でBootstrap3をhtml5shiv.jsとrespond.jsを使って動かす

Posted at

こういう方向け

  • Bootstrap3を使う環境でIE8を同時に動かす使うことを強いられた人
  • html5shiv.jsとrespond.jsを入れたけど上手く動かなかった人

そもそも素の状態でIE8にBootstrap3って動くの?

動きません

IE8の場合、html5のタグが無視されるのと、media queryが無効にされるのが原因です。

  • html5shiv.js
  • respond.js

そのため、これらのJSを読みこませることが回避方法としてよくある手法。

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

「いやー動かないんだけど」って言う人はCSSとJSの読み込み順を確認してください。順序が間違っていると動きません。

他にもRespond.jsに制約が結構あり、

  • 404等で読み込めないCSSがあると問答無用で動作しない。
  • Respond.jsが@importで読み込まれているCSSを解釈できない。
    • そもそもパフォーマンス的にイケてないのでやったらおこ。
  • BOM付きのUTF-8は動かないのでNG
  • ブラウザによってはローカルのCSSも解釈できない。よく調べてないので知らない。
  • link要素のmedia属性によるメディアクエリ指定はOK。ただし、それによって読み込まれるCSS内にメディアクエリが含まれていると読めないのでNG。

など。

そもそもIE8が動作しなければならない環境でBootstrap3を使うというのがツラミにあふれているので、極力避けたい。

IE8での動作保証を強いられた全ての人に幸あれ…。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0