Edited at

BootstrapでIE8対応[Rails]

More than 3 years have passed since last update.


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

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