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

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

是什么赋予了？

(注意:在 IE 和 Chrome 中测试 - Chrome 很好，一个框架红色，另一个框架白色。)

Answer 1

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