BLOG

IE8以下のselectivizr.js,respond.jsの読み込みでハマった

PUBLISHED AT 07/14/2015 / IN CATEGORY web

selectivizr,respond.js

久々の更新です。

最近IE8対応のレスポンシブ、クロスブラウザの案件がございまして微妙にハマった事をメモしときます。

挙動としてはIE8でselectivizr.js,とrespond.jsが効かないとうものでして。

ちなみに確認したのは実機のIE8ではなくIEテスターのIE8のなので、もしかしたら実機のIE8なら普通に動いたかもしれませんが確認するすべがないので一応書いておきます。

 

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/selectivizr1.0.3.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css">

というソースを<head>内に書いていたのですが、sytle.cssがIE8で効いていないという事です。
厳密にはstyle.css内に書いているMedia Queriesとnth-childセレクタが効いていないという事ですね。

これは明らかにselectivizr.js,とrespond.jsが効いていない。

んー、おかしいなーへんだなー、こわいなこわいなー

なんて思いながら色々検証。

ちなみにselectivizr.js,とrespond.jsを併用するときは、selectivizr.jsのバージョンが1.0.3じゃないとダメだって事はもちろん知っていますよ。
あと、普段の案件では普通に動いていますからね。
今案件はゼロからのコーディングではなくUI部分などは出来上がっていてコンテンツ部分のみ作るという案件だったため、すでに出来上がっている<head>に追加でゴニョゴニョ書いたので、他のスクリプトとぶつかっているのかな?なんて思いながら色々検証いたしまして…

そしたら、すんごい単純なことでしてcssの読み込みをjs読み込みの上でしなければいけなかったみたいです。

<link rel="stylesheet" type="text/css" href="style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/selectivizr1.0.3.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

ググっても出てこなかったので3時間くらいハマりました。
あくまで、IEテスターのIE8での事なので、実機のIE8ではどこでjsを読み込んでももしかしたら普通に動くかもしれません。