IE9 iframe 内的媒体查询失败
Posted
技术标签:
【中文标题】IE9 iframe 内的媒体查询失败【英文标题】：Media queries fail inside IE9 iframe 【发布时间】：2012-05-06 04:07:48 【问题描述】：我的 CSS 中有以下媒体查询：
@media screen and (min-width: 0px) and (max-width: 319px)
body background-color:red;
@media screen and (min-width: 320px) and (max-width: 480px)
body background-color:orange;
@media screen and (min-width: 481px) and (max-width: 980px)
body background-color:yellow;
@media screen and (min-width: 981px) and (max-width: 1200px)
body background-color:green;
@media screen and (min-width: 1201px)
body background-color:blue;
和五个相应大小的 iframe：
<iframe frameBorder="0" src="index.html" ></iframe>
查询在独立的 html 文件中启动正常，但在 iframe 上下文中查看时，它们在 IE9 中失败。所有其他浏览器都显示正常。
有人知道为什么吗？谢谢
[edit] 记录一下，父子html的docType是一样的，CSS是作为text/css服务的。
【问题讨论】：
您是否在非外部样式表中编写这些媒体查询？几个月来，我一直在处理在 iframe 中加载内容的项目，媒体查询的工作与预期完全一样，但是，最近我做了一个补充，将我的 CSS 放在了 html 文件的<style> 标记中要显示在 iframe 中，而不是使用 iframe 链接到页面上的外部工作表，并且 IE9 正在渲染所有 CSS，即使在应该被忽略的查询中，在加载时，然后如果我缩放则正确重新渲染我的浏览器一些。
Vimeo 把我带到这里
【参考方案1】：
我在使用 IE9 时遇到了这个问题。父页面没有声明 doctype。
在父页面中添加一个 html5 doctype (<!DOCTYPE html>) 解决了这个问题。
【讨论】：
【参考方案2】：这就是我所做的：
使用 jQuery... 获取页面上的所有 iframe onload 每个 iframe 找到所有样式表链接 为每个样式表获取 url 并附加一个随机的 num 'nocache' 查询字符串到它 创建一个新的样式表链接标签并将其附加到头部 完成。代码如下：
// This forces the media queries to run in IE iframes, by waiting for the iframes to load and then,
// re-getting/applying the stylesheet
(function($)
// Get each of the iframes on this page
$('iframe').each(function(index)
// On load of each iframe:
$(this).on('load', function()
var iframeDoc = $(this).contents();
// For each stylesheet reference found:
iframeDoc.find('link[rel="stylesheet"]').each(function()
// Get the current stylesheet's url and add a 'nocache' random num query string to it
var cssURL = $(this).attr('href');
cssURL += (cssURL.indexOf('?') != -1)? '&':'?';
cssURL += 'nocache=' + (Math.random() + index);
// Create a new stylesheet link tag and append it to the head
$("<link/>",
rel: "stylesheet",
type: "text/css",
href: cssURL
).appendTo(iframeDoc.find('head'));
);
);
);
)(jQuery);
【讨论】：
【参考方案3】：有同样的问题。但是我找到了一个简单的解决方法。使用 JS 创建 iframe 我刚刚将 ?nocache=Math.random() 之类的内容附加到 iframe src。这为我解决了问题:)
【讨论】：
好主意，但你必须使用内联 CSS 样式，否则包含的 CSS 文件将被缓存...【参考方案4】：不是一个真正的答案，但可以帮助其他人找到解决 IE 中此错误的方法。
包含 iframe 的页面
<link href="style.css" rel="stylesheet">
iframe 页面
<link href="style.css?frameX" rel="stylesheet">
参数 frameX 阻止 IE 缓存 css 页面，因此 iframe 具有独立于其他页面的响应式布局。这只是一个 hack（可怕的）并帮助其他人找到这个问题的答案。
示例文件
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
</head>
<body>
<p></p>
<hr>
250px frame
<iframe frameBorder="0" src="frame1.html" id='frame_1'></iframe>
<hr>
350px frame
<iframe frameBorder="0" src="frame2.html" id='frame_2'></iframe>
<hr>
390px frame
<iframe frameBorder="0" src="frame3.html" id='frame_3'></iframe>
</div>
</body>
frame1.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css?page=frame1" rel="stylesheet">
</head>
<body>
<p></p>
</body>
</html>
frame2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css?page=frame2" rel="stylesheet">
</head>
<body>
<p></p>
</body>
</html>
frame3.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css?page=frame3" rel="stylesheet">
</head>
<body>
<p></p>
</body>
</html>
style.css
iframedisplay:block;
@media (max-width: 8000px)
body p:before content: "bigger than 550px";
@media (max-width: 550px)
body p:before content: "max550";
@media (max-width: 450px)
body p:before content: "max450";
@media (max-width: 350px)
body p:before content: "max350";
@media (max-width: 250px)
body p:before content: "max250";
【讨论】：
你是我的英雄。这发生在我身上，没有任何意义。谢谢！【参考方案5】：您很可能无法解决此问题。媒体查询基于视口大小，我想 IE 在这种情况下不会将 iFrame 视为完全成熟的视口。
您最好的选择很可能是添加一些 javascript 来检测大小并在您用于响应式设计的相同阈值处添加一个类。这也可以让您向后兼容不支持媒体查询的浏览器。
【讨论】：
我后来发现，如果样式位于文档的头部而不是外部样式表，它可以正常工作，所以我不确定在这种情况下是否是这种情况。以上是关于IE9 iframe 内的媒体查询失败的主要内容，如果未能解决你的问题，请参考以下文章
带有纯 CSS3 媒体查询的 IE9 响应式图像调整大小问题