媒体查询跨框架泄漏(Media queries leaking across frames)

下面是一些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;}
}

以上是简单，但足以证明这个问题：这两个页面是红色的，尽管他们中的一个显然比其他的更广泛。 演示页

是什么赋予了？

（注：测试在IE和铬 - 铬是很好，与一个帧的红和其他白色）。

Answer 1:

正如你在阅读这个答案 ，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>

文章来源: Media queries leaking across frames