全体的にスタイルが崩れる
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で書くと
/[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」を使用して実現します。
= 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