Media queries fail inside IE9 iframe

css, html, media-queries, responsive-design

Solution

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

Problem

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.

Original source