媒体查询跨框架

这里泄漏的一些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;} 
}

的上面的内容被简化了，但足以证明这个问题：尽管其中一个页面是c，但两页都是红色的在学习上比其他人宽。 Demonstration page

什么给了？

（注：经测试，在IE和Chrome - 铬为细末，用一帧红色和其他白色）。

来源

2012-09-14 Niet the Dark Absol

哪个IE你测试这个？由于IE8以前的版本不支持媒体查询，因此肯定无法在IE8或更低版本中使用。它只支持IE9 –

雅认为？如果它是IE8或更低，则两个iframe都是白色的，而不是红色。 –

不一定。我只是尝试了IE 7，而且这两个页面都是白色的。 – DayS

正如您可以在this answer中看到的那样，Internet Explorer 9支持CSS3媒体查询，但当包含媒体查询的CSS位于外部文件中时，不在帧内，因此您应该将媒体查询放在test.html页面的头部。以前的IE版本本身不支持媒体查询，但您可以使用JavaScript库（请参阅respond.js或css3-mediaqueries-js）来解决此问题。

来源

2012-09-20 19:34:45

太棒了，非常感谢！这很难找到，只是将媒体查询放入html的主体而不是样式表中，这使得它在IE9上完美工作。（请注意，这个错误只是IE9 Win7 - 不是Vista或任何其他IE版本的问题）。 –

如果这样做不适合您，可以让IE9通过将URL更改为每个CSS文件，将每个CSS文件视为单独的实体 - 通过媒体查询将唯一的URL参数添加到共享CSS文件。例如，主框架加载site.css，iframe加载site.css？frame = 1。同样的效果。 – sync

@sync：真棒解决方案。我将#iefix添加到了框架的CSS中，现在它可以正常工作 – mstaessen

-1

您可以通过使用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>

来源

2012-09-19 13:36:27 DayS

真的吗？如果我：a）完全鄙视jQuery？ b）不希望JavaScript解决这个CSS问题？ c）想要调整窗口大小？ –

呃...我同意使用jQuery不是做CSS工作的最干净的方法。但我甚至不确定是否可以在IE9旧版本上做到这一点。此外，您可以在调整窗口大小时调整脚本以重新计算背景。如果您发现其他解决方案，请不要忘记在此处写入。我对此很好奇。 – DayS

嗯，是的，在这个例子中JS解决方案可以工作。然而，这是一个非常简单的例子。可能有任意数量的元素需要调整，级联仍然需要正确工作。 –

媒体查询跨框架

回答

相关问题