web-dev-qa-db-ja.com

Respond.JSが機能しないIE 8

何らかの理由で、応答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;
 }
}

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

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

internet-explorercss3internet-explorer-8media-queriesrespond.js
35
L84

同じ問題。 CSSをインラインで記述してから、応答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を記述してください！

90
Wen

サブドメインまたは [〜＃〜] cdn [〜＃〜] でCSSをホストしている可能性があります。

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

13
R Burchall

この作業を行うことはできましたが、スクリプトを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's answer を参照してください。私の状況ではCSSの後にありましたが、何らかの理由でheadで動作しませんでした。 bodyに挿入すると、意図したとおりに機能しました。

8
L84

Respond.JS。これは Bootstrap がInternet Explorer 8でメディアクエリを有効にするために使用するもので、 処理しません@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";
7
hsobhy

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

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

3
Peter_B.

ベストプラクティスは、html5shiv.jsとrespond.jsをインクルードし、ローカルホストで実行するようにして、正常に動作するようにすることです。

<!--[if lt IE 9]>

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

<![endif]-->

それがあなたのお役に立てば幸いです。

2
Venu immadi

Internet Explorer 11 を使用してInternet versionsExplorerの以前のバージョンをエミュレートしようとしている場合は、注意してください。

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

少なくともInternet Explorer 11の最初の更新があることを確認する必要があります。

のバグ修正を参照してください F12開発者ツールを使用してドキュメントモードをエミュレートする場合、条件付きコメントは機能しません

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

2
jeff-h

これに加えて、githubのexample.htmlがXP上のIE8ですぐに動作しないようにしたいだけです！

サーバーにコピーしたときにgithubの例が機能しないことがわかりました。私が見つけた解決策は、IE8でXPから2つの変更が必要です！

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

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

  • 使用する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”>
        <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>
1
Liam Wheldon

このエラーは、スクリプト "respond.min.js"が Ajax などを使用しているために発生します。 [〜＃〜] wamp [〜＃〜] または [〜＃〜] xampp [〜＃〜] のようなローカルまたはリモートサーバーにプロジェクトを配置する必要があります。

1
Genaro

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

0
krishnakumarp

私はこの問題について自分の髪の毛を引き出して、最終的に解決策を見つけました。私の問題は [〜＃〜] cdn [〜＃〜] すべてのメディアを保存するために使用することでした。

引っ越した respond.jsと私のCSSファイルはすべて同じドメインにあり、すべてが期待どおりに機能しました。これが同様の苦境にある人の助けになることを願っています。

0
Joshua Maynard

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

0
Selvanayagam M

Internet Explorer状態では、次のリンクがありました。これらのスクリプトを条件から外さなければなりませんでした。

<!--[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>

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

0
Martin Brabec

私は同じ問題を抱えていましたが、プロジェクトに Modernizr を含めたときに解決しました。

0
Rich

最初に、htmlおよびhtmlファイルのcssは同じドメインでホストされる必要があります。

第二に、

<base target="_blank" />

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

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

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

0
pigfly

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

<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行を最後に使用しましたが、ローカルレイアウトを除き、列レイアウトは機能しませんでした。

0
Katherine

同じ問題がありました。多くの時間を費やした後、これはLESS変数が原因であることに気付きました。レスポンシブ機能をオフにするためにBootstrap変数をオーバーライドしました：

@grid-float-breakpoint: 0;

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

次に、次のように変更しました。

@grid-float-breakpoint: 0px;

そして今、それは動作します。私はそれが誰かを助けることを願っています。

0
Orkun Tuzel

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

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

<link rel='stylesheet' href='/css/screen.css' />
<script src='/js/vendor/respond.js'></script>
<script src='http://polyfill.io/'></script>
0
tprsn

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

0
user1491819

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

0
Charlie