Запросы СМИ не выполняются в IE9 iframe

У меня есть следующие медиа-запросы в моем 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 frameBorder="0" src="index.html" height="320" width="255" ></iframe>

Выполнение запросов отлично в автономном html файле, но при просмотре в контексте iframe они не работают в IE9. Все остальные браузеры отображаются ОК.

Кто-нибудь знает почему? спасибо

[edit] Для записи родительский и дочерний html имеют одинаковый тип docType, а CSS - как text/css.

Ответ 1

Не настоящий ответ, но может помочь кому-то найти работу для этой ошибки в IE.

Страница, содержащая iframe

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

Страницы iframe

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

Параметр 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";}
}

Ответ 2

Вот что я сделал:

с помощью jQuery...
получить все фреймы на странице
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 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

Скорее всего, вы не сможете это исправить. Медиа-запросы основаны на размере видового экрана, и я полагаю, что IE не рассматривает iFrame как полноценный видовой экран в этом контексте.

Лучше всего, скорее всего, добавить немного JavaScript, который определяет размер, и добавит класс к тем же пороговым значениям, которые вы используете для вашего гибкого дизайна. Это также обеспечит обратную совместимость с браузерами, не поддерживающими медиа-запросы.

Ответ 4

Имел ту же проблему. Однако я нашел легкое решение. Используя JS для создания iframes, я просто добавил что-то вроде: nocache = Math.random() в iframe src. Это исправило это для меня:)

Ответ 5

У меня была эта проблема с IE9. У родительской страницы не было объявлено doctype.
Добавление html5 doctype (<!DOCTYPE html>) на родительской странице решило проблему.