internet-explorer - 跨帧泄漏的媒体查询

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

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

是什么赋予了？

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

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>