媒体查询跨框架泄漏

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)来解决这个问题.