178

IE8 は次の 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);
4

11 に答える 11

339

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

同じように、メディアクエリのみを有効にするより単純なRespond.jsがあります。min-widthmax-width

于 2011-04-24T14:06:49.867 に答える
78

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

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 プラグインを使用するよりもシンプルでアクセスしやすいソリューションになる可能性があります。

于 2011-04-24T15:10:05.780 に答える
14

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

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

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

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

于 2011-04-24T14:12:51.850 に答える
11

css3mediaqueries.js プロジェクト ページから取得。

注: @import されたスタイルシートでは機能しません (パフォーマンス上の理由から使用しないでください)。<link>また、 and<style>要素の media 属性もリッスンしません。

于 2012-02-08T18:52:25.103 に答える
8

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]-->
于 2014-02-19T05:05:41.903 に答える
6

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

Javascript ベースの回避策

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

<!--[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 つの代替手段です。CSS ハックを使用してIE<9 をターゲットにします。IE<9 のみのスタイルシートと同じ効果がありますが、別のスタイルシートは必要ありません。ただし、無効な CSS コードが生成されるため、このオプションはお勧めしません (これは、今日、CSS ハックの使用が一般的に嫌われているいくつかの理由の 1 つにすぎません)。

于 2015-07-10T16:23:36.810 に答える
6

編集された回答: IE は、インポート メディアとして画面と印刷のみを理解します。import ステートメントと共に提供される他のすべての CSS により、IE8 は import ステートメントを無視します。safari や mozilla などの Geco ブラウザには、この問題はありませんでした。

于 2011-04-24T08:32:26.137 に答える
5

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

于 2013-05-07T14:21:20.313 に答える
3

IE は、IE9 までメディア クエリのサポートを追加しませんでした。したがって、IE8では運が悪いです。

于 2011-04-24T14:01:11.087 に答える