CSS3 Media Querieを使ってるサイトでIE8以下にCSSが適用されない問題に対処する

Media Queriesでスマートフォン用のCSS作って便利ーって思ってたらIE8だとCSS自体が適用されてないことが発覚。
どうやらIE8以下ではMedia Queriesは認識しないためということ。

一般的な対処法はhead内にこれを追記する
<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–>

これでダメならこっちで。
IEで表示するとCSSが崩れるとかあるから、IEそれぞれのバージョンごとにCSS用意してみたり。

<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” />
<![endif]–>
<!–[if IE 7]>
<link rel=”stylesheet” type=”text/css” href=”ie7.css” />
<![endif]–>
<!–[if gte IE 8]>
<link rel=”stylesheet” type=”text/css” href=”ie8.css” />
<![endif]–>

IEバージョンごとにとかめんどくさいからIE6以上は全部このCSSって設定にしてる
<!–[if gte IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>

あと、IEってsectionタグ認識しないのね。
IEとか絶滅すればいいのに。

コメント

タイトルとURLをコピーしました