SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

【CSS3】メディアクエリをIE7、IE8でも使えるようにする

問題

あら?IE8はメディアクエリ(cssの@media何々)使えないんでしたっけ?

css3-mediaqquery

答え

IE9からはメディアクエリが使えるけど、IE6、IE7、IE8は使えない。

こちらのスクリプトを使うと、何とかなるでしょう。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

HTML5も!というときは、こちら。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

外部WebサイトのJSを読み込むのはNGなシステムの場合は、ダウンロードしてきて、自分のサーバーに置いて、そちらを読み込むとよいでしょう。

そして、このJSライブラリを使うときの注意点はこちら


メモ: 各ブラウザのHTML5、CSS3対応状況 → http://fmbip.com/litmus/


追記)簡単なサンプルを作ってみました。この程度ならIE7でもメディアクエリが使えました。

メディアクエリをIE7、IE8で使ってみる例

古いIEでtwitter bootstrapをちゃんと表示させるなどには無理な感じ。

関連するメモ

コメント