- 更新日: 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
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
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <%# ... %> <%= render 'layouts/shim' %> <%# ... %> </head> <body> |
以下がIE8以下の場合に、JavaScriptを読み込ませるパーシャルのビューファイル。
app/views/layouts/_shim.html.erb
1 2 3 4 |
<!--[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]--> |
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%以下だっため、私は対応しない方針にして試してはいませんが。
- – 参考リンク –
- Bootstrap3をIE8で使う時に注意すること – Blog.おにぎりたまごうぃんなー
- Bootstrap 3 での IE8 対策 | Web Design Leaves
- Making Twitter Bootstrap 3 Compatible with Internet Explorer 7 and belowExtreme CSS | Extreme CSS
- HTML & CSS の関連記事
- 画像がはみ出るのを防ぐCSSスタイルシート指定(モバイル・スマホ対応)
- SassとSCSSを変換するsass-convertコマンドとウェブサービス
- CSSをBEM/MindBEMdingの命名規則で書いてみる
- Twitter Bootstrapのデザインと挙動を気軽にテストできるBootplyが超絶便利!
- CSSでスクロールバーをデザイン(WebKitブラウザ)
- はてなブックマーク人気記事ブログパーツのデザイン変更
- Twitter Bootstrapで端末サイズ毎にHTML要素の表示・非表示を切り替え
- Twitter Bootstrap のカスタマイズをライブラリ本体に手を入れずに行う
- Sass の @extend で存在しないセレクタを指定する
- Rails + bootstrap-sass で submit ボタンに class, id を割り当てずに css を指定
Leave Your Message!