ie8メディアクエリによるcss分岐ができない

質問

ie8でメディアクエリによるcssの画面サイズ分岐ができなくて困っています。
環境は、windows XP Service Pack3です。

1.下記方法でIE8以下にもHTML5とメディアクエリを使えるようにしました。
　(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]-->

2.下記方法でデバイスの横幅に対応したcssを指定しました。
<link href="smartphone.css" media="screen and (max-width:480px)" rel="stylesheet" type="text/css">
<link href="tablet.css" media="screen and (min-width:481px) and (max-width:1024px)" rel="stylesheet" type="text/css">
<link href="pc.css" media="screen and (min-width:1025px)" rel="stylesheet" type="text/css">

3.現象
a. firefoxではローカル上のページもサーバー上のページも適用されていました。
b. ipodではサーバー上のページしか見ていませんが、適用されていました。
c. しかし、ie8ではローカルでもサーバーにアップしてもcssが適用されません。
d. ie8では、media="screen"だけの場合は適用されていますが、and以降のサイズ指定が入ると適用されません。
e.type=などの指定もアリ、ナシどちらの組み合わせも適用されません。

よろしくお願いいたします。

回答No.1

ORUKA1951 · ベストアンサー

IE8はCSS3のmediaqueryに対応していません。
mediaqueryを使用しなくても、ウィンドウ幅に追随するリキッドデザインで作成した上で、CSS3に対応しているスマートホンやモダンブラウザ向けにCSSを作成するのが基本です。

IE8用のjavascriptはありますが・・・
css3-mediaqueries-js ( http://code.google.com/p/css3-mediaqueries-js/ )
Respond.js( https://github.com/scottjehl/Respond )
　あまりお勧めはしません。

お礼

ご回答ありがとうございました。
参考にさせていただきます。

補足

早速のご回答、ありがとうございます。

もしよろしければ、続けて教えていただけますか。

あまりお勧めはしませんとのことですが、教えていただいたように、リキッドデザインがベストとのお考えからでしょうか。
それともjavascriptを使うと問題があるということでしょうか。