シングルマザーnolaの生活日記。Web制作の小ネタから、料理、お役立ちグッズ、美容の日記まで広く浅く更新中。

Bootstrap3 IE8に対応させたい

[2015.11.18]

もうIE8対応はいらないと思うけど・・・

Bootstrap3をIE8に対応させるにはhead内に以下を記述すればよいとあるけれど、駄目だった・・・

IE8で見ると モバイル表示になってしまっているという症状。

<!--[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]-->

解決方法としては、head内に以下を記述、必要なJSはダウンロードしてサーバへアップしておく。

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

respond.jsをやめて css3-mediaqueries.jsを使う。

上記のjsを読み込めばOKかというとそうではなくて、css3-mediaqueries.jsではメディアクエリーの記述方法が省略型だとそれを無視してしまうので、その部分のCSSを書き直す作業をしなくてはならない。

省略型
@media (max-width: 790px){…}

非省略型
@media screen and(max-width: 790px){…}

今回修正したファイルは、Bootstrapの_grid.sassというパーシャルファイル。ここの記述を @media screen and…という非省略型の記述に変更してコンパイル。これでIE8でもメディアクエリーが使えるようになりました。他のパーシャルファイルでも変えないといけないけれど、まぁIE8崩れてなければよい程度の対応なので今回はここまでに。

SassじゃなくてCSSだけでカスタマイズしてると言う方は、そのCSSファイルのメディアクエリーの指定を非省略型にすればOKだと思います。

この世から なくなってしまえ IEめ。

 

  • LINE

Advertisement

Site Search

Profile

profile

人生のいたずら(笑)でシングルマザーになったnolaです。Web制作をしています。主にコーディングをしていて、他にJS、PHP、WPカスタマイズなども。産休を経て現在はフルタイムでお仕事復帰です!