[Webデザイン]続…レスポンシブをIE8できれいに表示するFoundation5
公開日：
:
最終更新日：2014/03/16
その他
前回2月に行われたのconcrete5の関西ユーザーグループ勉強会でも質問させてもらったconcrete5にCSSフレームワークであるFoundation5を導入する件
勉強会でも指摘されたFoundation5を導入するといろいろと面倒…というコメントを貰ったのだけど、やってみたかったので自社向けのサイトで試しに導入をやってみました。
結果、見た目すごくきれいに導入されている！と感動していたものの、実際IE8（普段使っているのはIE9だけど）で確認すると、ナビメニューや画像などが崩れるなどの弊害が出ました。
Foundation5のドキュメントを観てもIE8に対応してそうではなかったのと、海外のどこかのフォーラムでFoundation4まではIE8対応だったものの、Foundation5からはIE8はサポートしなくなったそうです…残念
でも、そこで諦めるわけにもいかずいろいろ探していると、ありました！！というのが前回の記事「[Webデザイン関連]レスポンシブ対応したらIE8に非対応の刑…ヒ～助けて～Respond.js様！」だった。
具体的に実装について書き忘れた気がしたので、忘れないよう以下にメモ
<head> </head>内に以下を記述。ブラウザのバージョンがIE9未満の場合のみスクリプトを読込むようにした。（まあ、そのサイトから丸コピなんですけど…）
|
1 2 3 4 5 6 |
<!--[if lt IE 9]> <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script> <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script> <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script> <![endif]--> |
これで、IE8でもなんとか表示できるようになりました。
参考まで
