web-dev-qa-db-ja.com

CSS Media Queryに対するIE 8のサポート

IE 8は次のCSSメディアクエリーをサポートしません。

@import url("desktop.css") screen and (min-width: 768px);

そうでない場合は、代替の書き方は何ですか？ Firefoxでも同じように動作します。

以下のコードで何か問題がありますか？

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);
htmlcssresponsive-designinternet-explorer-8media-queries
178
testndtv

Internet ExplorerのIE 9より前のバージョンメディアクエリをサポートしていません。

IE8ユーザーのためにデザインをデグレードする方法を探しているなら、IEの条件付きコメントが役に立つかもしれません。これを使用して、前の規則を上書きするIE 8/7/6特定のスタイルシートを指定できます。

例えば：

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

これはIE8でレスポンシブデザインを可能にしませんが、JSプラグインを使用するよりも簡単でよりアクセスしやすいソリューションになるかもしれません。

77
Aaron

css3-mediaqueries-js はおそらくあなたが探しているものです：このスクリプトはメディアクエリーをエミュレートします。しかし、（スクリプトのサイトから）「これは@importedスタイルシートでは動作しません（パフォーマンス上の理由から使用してはいけません）。また、<link>および<style>要素のmedia属性を監視しません。

同じように、もっと単純な Respond.js があります。これはmin-widthとmax-widthのメディアクエリのみを有効にします。

341
Knu

私が見つけた最良の解決策は Respond.js です。あなたの主な関心事があなたのレスポンシブデザインがIE8で動作することを確認することであればなおさらです。 min/gzipしたとき1kbでかなり軽量で、IE8クライアントだけがそれをロードできることを確認できます。

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

ブートストラップを使用している場合にもお勧めの方法です。 http://getbootstrap.com/getting-started/#support-ie8-ie9

50
Brandon Pugh

IE8（およびそれ以前のバージョン）および3.5より前のFirefoxはメディアクエリーをサポートしていません。 Safari 3.2では部分的にサポートされています。

JavaScriptを使用してこれらのブラウザにメディアクエリのサポートを追加する回避策がいくつかあります。これらを試してください：

Media Queries jQueryプラグイン（最大/最小幅のみを扱う）

css3-mediaqueries-js - サポートしていないブラウザにメディアクエリのサポートを追加することを目的としたライブラリ

14
Faraz Kelhini

Css3mediaqueries.jsプロジェクトページから取得しました。

注： @インポートされたスタイルシートでは機能しません（パフォーマンス上の理由から使用しないでください）。 <link>および<style>要素のmedia属性も聞き取れません。

11
Bayo

Css3-mediaqueries-jsを使用する簡単な方法は、bodyタグを閉じる前に以下を含めることです。

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script 
   src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->
8
Ben C

編集回答：IEは、インポートメディアとして画面と印刷だけを理解しています。 importステートメントと一緒に提供される他のすべてのCSSは、IE 8にimportステートメントを無視させます。 safariやmozillaのようなGecoブラウザはこの問題を抱えていませんでした。

6
sra

メディアクエリ は、IE 8以下ではまったくサポートされていません。

Javascriptベースの回避策

IE8のサポートを追加するには、いくつかあるJSソリューションのうちの1つを使用できます。たとえば、 応答 を追加して、IE 8のメディアクエリサポートを追加するには、次のコードを使用します。

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries は同じことをする別のライブラリです。そのライブラリをHTMLに追加するためのコードは同じです。

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

代替案

JSベースのソリューションが気に入らない場合は、IE <9専用のスタイルを調整するIE <9専用のスタイルシートを追加することも検討する必要があります。そのためには、コードに次のHTMLを追加する必要があります。

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

注：

技術的にはもう1つの選択肢があります。--- IEをターゲットとするために CSSハック を使用することです。これはIE <9のみのスタイルシートと同じ効果がありますが、別のスタイルシートは必要ありません。しかし、私はこのオプションをお勧めしません。無効なCSSコードが生成されるためです（これは、今日CSSハックの使用が一般的に眉をひそめているいくつかの理由の1つです）。

6
John Slegers

Internet Explorer 8より前は、メディアクエリはサポートされていませんでした。ただし、場合によっては、条件付きコメントを使用してInternet Explorer 8以下のみをターゲットにすることもできます。あなただけの適切なCSSファイルアーキテクチャを使用する必要があります。

5
user1105491

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

私は@media \0screen {}を使いました、そしてそれはREAL IE8で私のためにうまく働きます。

4
sgarbesi

IEはIE 9までメディアクエリのサポートを追加しませんでした。だからIE8であなたは運が悪いです。

3
Boris Zbarsky