18

CSS に次のメディア クエリがあります。

@media screen and (min-width: 0px) and (max-width: 319px) {
    body {background-color:red;}
}

@media screen and (min-width: 320px) and (max-width: 480px) {
    body {background-color:orange;}
}

@media screen and (min-width: 481px) and (max-width: 980px) {
    body {background-color:yellow;}
}

@media screen and (min-width: 981px) and (max-width: 1200px) {
    body {background-color:green;}
}

@media screen and (min-width: 1201px) {
    body {background-color:blue;}
}

および対応するサイズの 5 つの iframe:

<iframe frameBorder="0" src="index.html" height="320" width="255" ></iframe>

クエリは、スタンドアロンの html ファイルでは正常に起動しますが、iframe コンテキストで表示すると、IE9 では失敗します。他のすべてのブラウザーは正常に表示されます。

理由を知っている人はいますか？ありがとう

[編集] レコードについては、親と子の html は同じ docType を持ち、CSS は text/css として提供されています。

4

5 に答える 5

22

本当の答えではありませんが、他の誰かが IE のこのバグの回避策を見つけるのに役立つ可能性があります。

iframe を含むページ

<link href="style.css" rel="stylesheet">

iframe ページ

<link href="style.css?frameX" rel="stylesheet">

パラメータ frameX は IE が css ページをキャッシュするのを防ぎます。したがって、iframe は他のページとは独立してレスポンシブ レイアウトを持ちます。これは単なるハック (恐ろしいもの) であり、他の誰かがこの問題の答えを見つけるのを助けるためのものです。

サンプルファイル

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
</head>
<body>
  <p></p>

  <hr>
  250px frame
  <iframe frameBorder="0" src="frame1.html" height="100" width="250" id='frame_1'></iframe>  

  <hr>
  350px frame
  <iframe frameBorder="0" src="frame2.html" height="100" width="350" id='frame_2'></iframe>  

  <hr>
  390px frame
  <iframe frameBorder="0" src="frame3.html" height="100" width="390" id='frame_3'></iframe>  

</div>
</body>

frame1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css?page=frame1" rel="stylesheet">
</head>
<body>
  <p></p>
</body>
</html>

frame2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css?page=frame2" rel="stylesheet">
</head>
<body>
  <p></p>
</body>
</html>

frame3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css?page=frame3" rel="stylesheet">
</head>
<body>
  <p></p>
</body>
</html>

スタイル.css

iframe{display:block;}

@media (max-width: 8000px)
{
  body p:before {content: "bigger than 550px";}
}

@media (max-width: 550px)
{
  body p:before {content: "max550";}
}

@media (max-width: 450px)
{
  body p:before {content: "max450";}
}

@media (max-width: 350px)
{
  body p:before {content: "max350";}
}


@media (max-width: 250px)
{
  body p:before {content: "max250";}
}
于 2012-06-05T15:29:29.470 に答える
3

これが私がしたことです：

  • jQueryを使って...
  • ページ上のすべての iframe を取得する
  • 各 iframe の onload すべてのスタイルシート リンクを見つける
  • スタイルシートごとに URL を取得し、ランダムな num 'nocache' クエリ文字列を追加します
  • 新しいスタイルシート リンク タグを作成し、ヘッドに追加します
  • 終わり。

コードは次のとおりです。

// This forces the media queries to run in IE iframes, by waiting for the iframes to load and then,
// re-getting/applying the stylesheet
(function($){
    // Get each of the iframes on this page
    $('iframe').each(function(index){
        // On load of each iframe:
        $(this).on('load', function(){
            var iframeDoc = $(this).contents();

            // For each stylesheet reference found:
            iframeDoc.find('link[rel="stylesheet"]').each(function(){
                // Get the current stylesheet's url and add a 'nocache' random num query string to it
                var cssURL = $(this).attr('href');
                cssURL += (cssURL.indexOf('?') != -1)? '&':'?';
                cssURL += 'nocache=' + (Math.random() + index);

                // Create a new stylesheet link tag and append it to the head
                $("<link/>", {
                    rel: "stylesheet",
                    type: "text/css",
                    href: cssURL
                }).appendTo(iframeDoc.find('head'));
            });

        });
    });
})(jQuery);
于 2013-11-07T17:35:19.120 に答える
1

同じ問題がありました。しかし、私は簡単な修正を見つけました。JS を使用して iframe を作成し、iframe src に ?nocache=Math.random() のようなものを追加しました。それは私のためにそれを修正しました:)

于 2013-01-23T12:04:14.560 に答える
1

ほとんどの場合、これを修正することはできません。メディア クエリはビューポート サイズに基づいており、IE はこのコンテキストで iFrame を本格的なビューポートとして扱っていないと思います。

最善の策は、サイズを検出し、レスポンシブ デザインに使用しているのと同じしきい値でクラスを に追加する JavaScript を少し追加することです。これにより、メディア クエリをサポートしていないブラウザーとの下位互換性も確保されます。

于 2012-04-25T14:54:19.100 に答える
0

私はIE9でこの問題を抱えていました。親ページに doctype が宣言されていませんでした。
親ページにhtml5 doctype ( <!DOCTYPE html>) を追加すると、問題が解決しました。

于 2014-12-12T18:32:58.620 に答える