媒体查询在 IE9 iframe 内失败 [英] Media queries fail inside IE9 iframe

查看：26
本文介绍了媒体查询在 IE9 iframe 内失败的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的 CSS 中有以下媒体查询:

@media screen and (min-width: 0px) and (max-width: 319px) {身体{背景颜色:红色；}}@media screen and (min-width: 320px) and (max-width: 480px) {身体{背景颜色:橙色；}}@media screen and (min-width: 481px) and (max-width: 980px) {身体{背景颜色:黄色；}}@media screen and (min-width: 981px) and (max-width: 1200px) {身体{背景颜色:绿色；}}@media 屏幕和(最小宽度:1201px){身体{背景颜色:蓝色；}}

和五个相应大小的 iframe:

<iframe frameBorder="0" src="index.html" height="320" width="255" ></iframe>

查询在独立的 html 文件中正常启动，但在 iframe 上下文中查看时，它们在 IE9 中失败.所有其他浏览器都显示正常.

有人知道为什么吗?谢谢

[edit] 作为记录，父子 html 具有相同的 docType，并且 CSS 以 text/css 形式提供.

解决方案

不是真正的答案，但可以帮助其他人在 IE 中找到解决此错误的方法.

包含 iframe 的页面

iframe 页面

参数 frameX 可防止 IE 缓存 css 页面，因此 iframe 具有独立于其他页面的响应式布局.这只是一个黑客(可怕的)并帮助其他人找到这个问题的答案.

示例文件

Index.html

<html lang="zh-cn"><头><title>标题</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="style.css" rel="stylesheet"><身体><p></p><小时>250px 帧<iframe frameBorder="0" src="frame1.html" height="100" width="250" id='frame_1'></iframe><小时>350px 帧<iframe frameBorder="0" src="frame2.html" height="100" width="350" id='frame_2'></iframe><小时>390px 帧<iframe frameBorder="0" src="frame3.html" height="100" width="390" id='frame_3'></iframe>

frame1.html

<html lang="zh-cn"><头><title>标题</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="style.css?page=frame1" rel="stylesheet"><身体><p></p>

frame2.html

<html lang="zh-cn"><头><title>标题</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="style.css?page=frame2" rel="stylesheet"><身体><p></p>

frame3.html

<html lang="zh-cn"><头><title>标题</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="style.css?page=frame3" rel="stylesheet"><身体><p></p>

style.css

iframe{display:block;}@media(最大宽度:8000px){body p:before {content: "大于 550px";}}@media(最大宽度:550px){正文 p:before {content: "max550";}}@media(最大宽度:450px){正文 p:before {content: "max450";}}@media(最大宽度:350px){正文 p:before {content: "max350";}}@media(最大宽度:250px){正文 p:before {content: "max250";}}

I have the following media queries in my 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;}
}

and five iframes at corresponding sizes:

<iframe frameBorder="0" src="index.html" height="320" width="255" ></iframe>

The queries kick-in fine in the standalone html file, but when viewed in an iframe context, they fail in IE9. All other browsers display OK.

Anyone know why? thanks

[edit] For the record, the parent and child html have the same docType, and the CSS is being served as text/css.

解决方案

Not a real answer but could help somebody else find a work around for this bug in IE.

Page containing iframes

<link href="style.css" rel="stylesheet">

Iframe pages

<link href="style.css?frameX" rel="stylesheet">

The param frameX prevents IE from caching the css page and thus the iframe has responsive layout independently from the other pages. This is just a hack(horrible one) and to help somebody else find the answer to this problem.

Sample files

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" height="100" width="250" id='frame_1'></iframe>  

  <hr>
  350px frame
  <iframe frameBorder="0" src="frame2.html" height="100" width="350" id='frame_2'></iframe>  

  <hr>
  390px frame
  <iframe frameBorder="0" src="frame3.html" height="100" width="390" 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

iframe{display: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";}
}

这篇关于媒体查询在 IE9 iframe 内失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆