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;}
}

和五个相应大小的 iframe：

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

查询在独立的 html 文件中运行良好，但在 iframe 上下文中查看时，它们在 IE9 中失败。所有其他浏览器都显示 OK。

有谁知道为什么？谢谢

[编辑] 作为记录，父和子 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>

框架1.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>

框架2.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>

框架3.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

您很可能无法解决此问题。媒体查询基于视口大小，我想 IE 在这种情况下不会将 iFrame 视为完全成熟的视口。

您最好的选择很可能是添加一些 JavaScript 来检测大小并在您用于响应式设计的相同阈值处添加一个类。这也可以让你向后兼容不支持媒体查询的浏览器。

于 2012-04-25T14:54:19.100 回答
1

有同样的问题。但是我找到了一个简单的解决方法。使用 JS 创建 iframe，我刚刚将 ?nocache=Math.random() 之类的内容附加到 iframe src。那为我修好了:)

于 2013-01-23T12:04:14.560 回答
0

我在 IE9 上遇到了这个问题。父页面没有声明 doctype。
在父页面中添加一个 html5 doctype ( <!DOCTYPE html>) 解决了这个问题。

于 2014-12-12T18:32:58.620 回答