35

何らかの理由で、応答JSが機能していないようです。IE 8のメディアクエリを使用して、さまざまなサイズのモニターの背景画像を変更しています。IE 8では、背景はなく、単色だけです。

コードは次のようになります。

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

メディアクエリは次のようになります。

@media (min-width:769px) and (max-width:1366px){
 html, body{
   background: url(/images/backgrounds/1366-bg.jpg)  no-repeat center top fixed #190303;
   background-size:100% auto;
 }
}

上記のコードがIE8で機能しない理由はありますか？IE 8メディアクエリを機能させるために使用する必要がある別のJSはありますか？

注：html5-shivは機能しているようです。ライブWebサーバーでテストしています。

4

21 に答える 21

90

同じ問題。CSSをインラインで記述し、respond jsスクリプトを呼び出すため、ロードシーケンスの問題であることがわかりました。

<script type="text/javascript" src="js/respond.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

そのはず

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<script type="text/javascript" src="js/respond.min.js"></script>

常にスタイルシートをリンクするか、jsスクリプトの前にインラインCSSを記述してください！

于 2013-05-30T03:47:36.827 に答える
13

これは、CSSをサブドメインまたはCDNでホストしていることが原因である可能性があります。

Respond.jsは、Ajaxを介してCSSの元のコピーを要求することで機能するため、CDN（またはサブドメイン）でスタイルシートをホストする場合は、クロスドメイン通信を有効にするためにプロキシページをアップロードする必要があります。

于 2014-01-01T10:53:55.007 に答える
8

私はこれを機能させることができましたが、bodyタグにスクリプトを挿入する必要がありました。

<head>
    <!-- Code -->
</head>
<body> 
    <!--[if lt IE 9]>
        <script type="text/javascript" src="/js/respond.min.js"></script>
    <![endif]-->

    <!-- Site Code -->
</body>

なぜこれが機能するのかわかりませんが、問題は解決しました。

注：respond.jsはCSSの後に来る必要があるため、Wenの回答を参照してください。head私の状況ではCSSの後でしたが、何らかの理由で機能しませんでした。挿入するbodyと、意図したとおりに機能しました。

于 2013-09-21T01:11:25.833 に答える
7

BootstrapがInternetExplorer8でメディアクエリを有効にするために使用するRespond.JSは、ファイルを処理しません@import。

GitHubリポジトリから： Respond.jsは、@ importを介して参照されたCSSを解析しません。また、スタイル要素内のメディアクエリは解析のために再要求できないため、これらのスタイルは機能しません。

bootstrap.cssとヘッダーにメディアクエリを含むCSSをロードする必要がありました

<link href='css/bootstrap.min.css' rel='stylesheet' type='text/css' media='all' />
<link href='css/media.css' rel='stylesheet' type='text/css' media='all' />

次のインポート方法は機能しません。

@import "bootstrap.min.css";
@import "media.css";
于 2014-01-19T10:45:23.087 に答える
3

ローカルホストまたはWebサーバーを使用していることを確認してください。「セキュリティ上の制限により、一部のブラウザでは、このスクリプトがfile：// urlsで機能しない場合があります（XMLHttpRequestを使用しているため）。Webサーバーで実行してください。」

ソース：https ：//github.com/scottjehl/Respond

于 2013-08-20T20:46:28.503 に答える
2

ベストプラクティスは、html5shiv.jsとrespond.jsを含め、ローカルホストで実行することを確認することです。これにより、正常に機能します。

<!--[if lt IE 9]>

    <script src="js/html5shiv.js"> </script>
    <script src="js/respond.min.js"> </script>

<![endif]-->

お役に立てば幸いです。

于 2013-11-13T09:57:53.223 に答える
2

Internet Explorer11を使用して以前のバージョンのInternetExplorerをエミュレートしようとしている場合は、注意が必要です。

Internet Explorer 10IE以降は、条件付きコメントをサポートしていません。Internet Explorer 11の最初のリリースは、エミュレーションモードで以前のバージョンとして実行している場合でも、それらをサポートしていませんでした。条件付きコメントはサポートされなくなりました（MSDN）を参照してください。

少なくともInternetExplorer11の最初の更新があることを確認する必要があります。疑わしい場合は、最新のものを入手してください。

F12開発ツールを介してドキュメントモードをエミュレートすると、条件付きコメントが機能しないのバグ修正を参照してください。

また、Stack Overflowの質問での議論では、Internet Explorer 8のドキュメントモードをエミュレートしている場合でも、InternetExplorer11が条件付きコメントを尊重しないのはなぜですか。。

于 2014-11-02T23:24:05.563 に答える
1

このエラーは、スクリプト「respond.min.js」がAjaxなどを使用しているために発生します。プロジェクトは、 WAMPやXAMPPなどのローカルサーバーまたはリモートサーバーに配置する必要があります。

于 2013-09-13T04:03:26.817 に答える
1

これに、githubのexample.htmlがXP上のIE8ではそのままでは機能しないことを追加したかっただけです。

サーバーにコピーすると、githubの例が機能しないことがわかりました。私が見つけた解決策は、XPのIE8でテストした場合の例では、2つの変更が必要であるということでした。

  • https://github.com/scottjehl/Respondのコンテンツをダウンロードして抽出します

  • クロスドメインフォルダーでexample.htmlを開きます。「rawgithub.com」を「rawgit.com」に置き換えます（IE8 / xpは、cssファイルを含める場合のリダイレクトを好みません）

  • 使用するCDNはXPでサポートされていないSNIを使用するため、「https」を「http」に変更します。したがって、XPユーザーをサポートする場合は、これに対応する必要があります。（または、CDNで専用IPを取得するために多額の費用を費やす必要があります）

これが変更されると、すべてが例でうまく機能します:-)これが誰かに役立つことを願っています:-)以下のexample.htmlコードを動作させます：

  <!DOCTYPE html>
  <html>
     <head>
        <meta charset="utf-8" />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge”&gt;
        <meta name=”viewport” content=”width=device-width, initial-scale=1?>
        <title>Respond JS Test Page</title>
        <link href="http://rawgit.com/scottjehl/Respond/master/test/test.css" rel="stylesheet"/>
        <link href="http://rawgit.com/scottjehl/Respond/master/test/test2.css" media="screen and (min-width: 600px)" rel="stylesheet"/>
        <script src="../dest/respond.src.js"></script>
        <!-- Respond.js proxy on external server -->
        <link href="http://rawgit.com/scottjehl/Respond/master/cross-domain/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
        <link href="respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
        <script src="respond.proxy.js"></script>
     </head>
     <body>
        <p>This is a visual test file for cross-domain proxy.</p>
        <p>The media queries in the included CSS file simply change the body's background color depending on the browser width. If you see any colors aside from black, then the media queries are working in your browser. You can resize your browser window to see it change on the fly.</p>
        <p id="attribute-test">Media-attributes are working too! This should be visible above 600px.</p>
     </body>
  </html>
于 2016-03-23T09:15:33.640 に答える
0

次の行の順序を修正することで、この問題を解決しました。これらは次の順序である必要があります。

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

最後にX-UA-Compatible行があり、ローカルを除いて列レイアウトが機能しませんでした。

于 2014-02-07T19:00:45.533 に答える
0

同じ問題がありましたが、プロジェクトにModernizrを含めたときに解決しました。

于 2014-02-19T20:14:35.150 に答える
0

<link>スタイルシートタグは。内に配置する必要があります<head>。すべてのブラウザは、の外部にリンクされたスタイルシートをロードしてレンダリングしますが<head>、仕様に反しており、respond.jsそれらを処理しません。

于 2014-07-16T21:59:51.007 に答える
0

InternetExplorerの状態で次のリンクがありました。私はそれらのスクリプトを状態から外さなければなりませんでした。

<!--[if lt IE 9]>    
    <script type="text/javascript" src="~/Content/js/html5shiv.js"></script>
    <script type="text/javascript" src="~/Content/js/respond.min.js"></script>
<![endif]-->

これに置き換えます：

<script type="text/javascript" src="~/Content/js/html5shiv.js"></script>
<script type="text/javascript" src="~/Content/js/respond.min.js"></script>

これらのスクリプトをヘッドではなくフッターに含める場合と同じように、条件が同じ効果を発揮するようです。

于 2014-09-08T19:58:18.150 に答える
0

私はこの問題について髪を引っ張ってきて、最終的に解決策を見つけました。私の問題は、すべてのメディアを保存するために使用するCDNでした。

移動respond.jsすると、CSSファイルはすべて同じドメインにあり、すべてが期待どおりに機能しました。これが同様の苦境にある誰かに役立つことを願っています。

于 2014-09-11T17:40:00.740 に答える
0

Internet Explorer 8以下では、特定の数のCSSファイルしかロードできず、特定の最大行数しかロードできません。これらの制限を超えると、CSSはロードされません。CSSコンテンツを1つのファイルに結合してみてください。

于 2014-10-14T05:59:04.253 に答える
0

polyfill.ioも使用していますか？

これが他の誰かに役立つ場合に備えて、私はpolyfill.ioを使用していて、respond.jsの前にロードしていました。私はそれを移動する必要があり、respond.jsが次のように機能し始めました：

<link rel='stylesheet' href='/css/screen.css' />
<script src='/js/vendor/respond.js'></script>
<script src='http://polyfill.io/'></script>
于 2014-11-12T10:46:24.773 に答える
0

まず、htmlファイルとhtmlファイルのcssは同じドメインでホストする必要があります。これにより、最終的には機能します。

第二に、

<base target="_blank" />

次のように書く必要があります

<base target="_blank"></base>

私は上記のすべての方法を試しました。次のhttp://scottjehl.github.io/Respond/test/test.htmlのデモが表示 される場合があります 。その後、cssファイルをhtmlファイルの同じドメインに配置しようとしましたが、成功しました。 htmlファイルのcss、それも動作しませんでした。

于 2015-02-28T07:37:45.007 に答える
0

私も同じ問題を抱えていました。たくさんの時間を費やした後、私はこれがLESS変数によって引き起こされていることに気づきました。レスポンシブ機能をオフにするために、Bootstrap変数をオーバーライドしました。

@grid-float-breakpoint: 0;

これがrespond.jsを壊したものでした。

それから私はそれを次のように変更しました：

@grid-float-breakpoint: 0px;

そして今それは動作します。それが誰かに役立つことを願っています。

于 2015-04-16T07:24:02.340 に答える
0

私の場合、問題はcssファイルの1つがサーバーで利用できなかったことでした。response.jsは、再帰関数でcssファイルのリストを処理します。最初のajaxの失敗(req.status !== 200 && req.status !== 304)で、それは静かに失敗します。私はそれを機能させるために間違ったcssパスを修正しなければなりませんでした。

于 2015-07-08T08:51:19.023 に答える
0

file：//でページを表示した場合、Respond.jsは機能しません。
サーバーでフォルダーを使用すると、http：// localhost /yoursitename/のように機能します。

于 2015-08-07T08:31:03.313 に答える
-4

同じ問題が発生し、の<base>タグを削除することで解決しました<head>。StackOverflowの質問Respond.jsで解決策がInternetExplorer7で機能しないことがわかりましたが、H5BPの例は機能します。次の原因が考えられます。

<base />

ではなく

<base></base>

Internet Explorer 6〜8（9についてはよくわかりません）は、終了タグがない場合にぐらつきをスローします。次に、他のすべてのheadタグがの子要素になり<base>ます。そして、すべてが壊れます：/。

お役に立てば幸いです。

于 2013-06-15T04:39:08.623 に答える