媒体查询跨框架泄漏 [英] 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来自外部文件：

The test.html page contains some CSS from an external file:

<link rel="stylesheet" type="text/css" href="style.css" />

样式表有：

@media all and (max-width: 600px) {
  body {background-color: red;}
}

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

The above is simplified, but enough to demonstrate the issue: Both pages are red, despite one of them clearly being wider than the other. Demonstration page

提供什么？

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

(Note: Tested in IE and Chrome - Chrome was fine, with one frame red and the other white.)

推荐答案

正如您可以阅读此答案，Internet Explorer 9支持CSS3媒体查询，但当包含媒体查询的CSS在外部文件中时不支持帧，因此您应将媒体查询放在 test.html 页面。以前的IE版本本身不支持媒体查询，但您可以使用javascript库（请参阅 respond.js 或 css3-mediaqueries-js ）以克服此问题。

As you can read in this answer, Internet Explorer 9 supports CSS3 media queries, but not within frames when the CSS containing the media query is in an external file, so you should put your media query in the head of the test.html page. Previous IE versions don't support media queries natively, but you could use a javascript library (see respond.js or css3-mediaqueries-js) to overcome this problem.

这篇关于媒体查询跨框架泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！