Медиа-запросы просачиваются через кадры

Вот немного HTML:

<iframe src="test.html" style="width: 200px; height: 100px;"></iframe>
<iframe src="test.html" style="width: 800px; height: 100px;"></iframe>

Страница test.html содержит некоторый CSS из внешнего файла:

<link rel="stylesheet" type="text/css" href="style.css" />

А в таблице стилей есть:

@media all and (max-width: 600px) {
  body {background-color: red;}
}

Вышеупомянутое упрощено, но достаточно, чтобы продемонстрировать проблему: обе страницы красные, несмотря на то, что одна из них явно шире другой. Демонстрационная страница

Что дает?

(Примечание: протестировано в IE и Chrome - Chrome все в порядке, одна рамка красная, а другая белая.)


iframe internet-explorer media-queries
person Niet the Dark Absol    schedule 14.09.2012    source источник
comment
в каком IE вы это тестируете? Конечно, это не будет работать в IE8 или ниже, потому что медиа-запросы не поддерживаются в предыдущей версии IE8. Поддерживается только в IE9.   -  person Suvi Vignarajah    schedule 19.09.2012
comment
Ты думаешь? Если бы это был IE8 или меньше, оба окна iframe были бы белыми, а не красными.   -  person Niet the Dark Absol    schedule 19.09.2012
comment
Не обязательно. Я только что попробовал IE 7, и обе страницы белые.   -  person DayS    schedule 19.09.2012

Ответы (2)


arrow_upward
18
arrow_downward

Как вы можете прочитать в этом ответе, Internet Explorer 9 поддерживает медиа-запросы CSS3, но не внутри фреймов, когда CSS, содержащий медиа-запрос, находится во внешнем файле, поэтому вам следует поместить медиа-запрос в заголовок страницы test.html. Предыдущие версии IE не поддерживают медиа-запросы изначально, но вы можете использовать библиотеку javascript (см. response.js или css3-mediaqueries-js), чтобы решить эту проблему.

person Community    schedule 20.09.2012
comment
Потрясающе, большое спасибо! Это очень сложно найти, и простое размещение медиа-запроса в основной части html вместо таблицы стилей позволяет ему отлично работать в IE9. (Обратите внимание, что эта ошибка относится только к IE9 Win7 - не проблема для Vista или любой другой версии IE). - person mike nelson; 11.09.2013
comment
Если это нецелесообразно для вас, вы можете позволить IE9 видеть каждый файл CSS как отдельный объект, изменив URL-адрес для каждого - добавьте уникальный параметр URL-адреса в общий файл CSS с медиа-запросами. Например, основной фрейм загружает site.css, iframe загружает site.css? Frame = 1. Тот же эффект. - person sync; 22.10.2013
comment
@sync: отличное решение. Я добавил #iefix в css фрейма, и теперь он работает правильно - person mstaessen; 01.04.2014

arrow_upward
-1
arrow_downward

Вы можете выполнить эту работу, используя jquery со следующим скриптом:

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
    $(document).ready(function() {
        if ($(document).width() < 600) {
            $('body').css('background-color', 'red');
        };
    });
</script>
person DayS    schedule 19.09.2012
comment
Действительно? А что, если я: а) Совершенно презираю jQuery? б) Не хотите использовать JavaScript для решения этой проблемы CSS? в) Хотите изменить размер окна? - person Niet the Dark Absol; 19.09.2012
comment
Что ж ... Я согласен с тем, что использование jQuery - не самый чистый способ выполнять работу с CSS. Но я даже не уверен, возможно ли это сделать в более старых версиях IE9. Также вы можете настроить скрипт на повторное вычисление фона при изменении размера окна :) Если вы найдете другое решение, не забудьте написать его здесь. Мне любопытно об этом. - person DayS; 19.09.2012
comment
Ну да, в этом примере JS-решение подойдет. Однако это намного упрощенный пример. Может существовать произвольное количество элементов, требующих настройки, и каскадирование все равно должно работать правильно. - person Niet the Dark Absol; 19.09.2012