这是一些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 很好,一个框架红色,另一个框架白色。)
最佳答案
正如您在 this answer 中所读到的那样, Internet Explorer 9 支持 CSS3 媒体查询,但当包含媒体查询的 CSS 在外部文件中时不支持在帧内,因此您应该将媒体查询放在 test.html
的头部。页。以前的 IE 版本本身不支持媒体查询,但您可以使用 javascript 库(参见 respond.js 或 css3-mediaqueries-js )来解决这个问题。
关于internet-explorer - 跨帧泄漏的媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12416610/