LoginSignup
2
3

More than 5 years have passed since last update.

BootstrapでIE8対応[Rails]

Last updated at Posted at 2015-02-26

全体的にスタイルが崩れる

RailsプロジェクトでBootstrapをベースにしてシステムを作ってて、いざIE8で確認したときに悲しいことになっていたので対応したことをメモします。IE8 の場合、html5のタグが無視、media query が無効にされるのが原因だそうです。
ちなみにjQueryも2系を使ってはいけません。jQueryは2系からIE8に対応していないそうです。

BootstrapはIE8に対応してますので以下のようにするとスタイルは直ります。Bootstrap4からはIE8もサポートしないという噂。

<!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <script src="/js/respond.js"></script>
<![endif]-->

slimで書くと

application.slim
/[if lt IE 9]
  = javascript_include_tag "bootstrap/html5shiv.min.js"
  = javascript_include_tag "bootstrap/respond.min.js"

以下参照
http://getbootstrap.com/getting-started/#template

placeholderが表示されない

palceholderもhtml5からのものなのでIE8では使用できません。
でも、javascriptで同様なことは実現可能です。今回は手軽にjQueryプラグインの「jquery.ah-placeholder」を使用して実現します。

application.slim
= javascript_include_tag "jquery.ah-placeholder.js"
javascript:
  $(function()
    {
      $('[placeholder]').ahPlaceholder({
        placeholderColor : 'silver',
        placeholderAttr  : 'placeholder',
        likeApple        : false
      });
    });

参考

Getting started · Bootstrap
http://getbootstrap.com/getting-started/#template

BootstrapのIE8対応 - Qiita
http://qiita.com/kimromi/items/d2f234c90c07f5417a8f

Bootstrap3をIE8で使う時に注意すること - Blog.おにぎりたまごうぃんなー
http://blog.obentoba.co/entry/2013/10/22/bootstrap3-for-ie8

placeholderをIEでも使えるようにするjQueryプラグイン「ah-placeholder.js」 | 株式会社アクトゼロ|ソーシャルメディアマーケティング・訪日インバウンド施策
http://www.actzero.jp/developer/report-2794.html

2
3
0

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
2
3