html – IE9 iframe中的媒体查询失败

发布时间：2020-12-14 21:43:08 所属栏目：资源来源：网络整理

导读：我的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:

我的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" height="320" width="255" ></iframe>

这些查询在独立的html文件中可以正常运行，但是当在iframe上下文中查看时，它们在IE9中失败。所有其他浏览器都显示OK。

任何人都知道为什么谢谢

对于记录，父和子html具有相同的docType，并且CSS被用作text / css。

解决方法

不是一个真正的答案，但可以帮助别人在IE中找到这个bug的工作。

包含iframe的页面

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

iframe页面

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

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

示例文件

的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";}
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!