Question

这是一些HTML：

<iframe src="test.html" style="width: 200px; height: 100px;"></iframe>
<iframe src="test.html" style="width: 800px; height: 100px;"></iframe>

test.html页面包含来自外部文件的一些CSS：

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

样式表有：

@media all and (max-width: 600px) {
  body {background-color: red;}
}

以上是简化的，但足以证明这个问题：两个页面都是红色的，尽管其中一个明显比另一个更宽。 Demonstration page

是什么给出了？

（注意：在IE和Chrome中测试过 - Chrome很好，一帧红色，另一帧白色。）

Answer 1

正如您在this answer中所读到的，Internet Explorer 9支持CSS3媒体查询，但当包含媒体查询的CSS位于外部文件中时，不支持帧内，因此您应该将媒体查询放在test.html页面。以前的IE版本本身不支持媒体查询，但您可以使用javascript库（请参阅respond.js或css3-mediaqueries-js）来解决此问题。

Answer 2

您可以使用以下脚本使用jquery来完成这项工作：

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
    $(document).ready(function() {
        if ($(document).width() < 600) {
            $('body').css('background-color', 'red');
        };
    });
</script>

媒体查询跨框架泄漏

2 个答案: