Respond.JS не работает в IE 8
По некоторым причинам кажется, что ответ JS не работает. Я использую Media Queries в IE 8, чтобы изменить фоновые изображения для мониторов различного размера. В IE 8 нет фона, только сплошной цвет.
Код выглядит так:
<!--[if lt IE 9]>
<script type="text/javascript" src="/js/html5-shiv.min.js"></script>
<script type="text/javascript" src="/js/respond.min.js"></script>
<![endif]-->
Медиа-запрос выглядит так:
@media (min-width:769px) and (max-width:1366px){
html, body{
background: url(/images/backgrounds/1366-bg.jpg) no-repeat center top fixed #190303;
background-size:100% auto;
}
}
Есть ли причина, по которой приведенный выше код не будет работать в IE 8? Есть ли другой JS, который я должен попытаться использовать, чтобы заставить IE 8 Media Queries работать?
Примечание. Похоже, что html5-shiv работает. Я тестирую на живом веб-сервере.
21 ответ
Та же проблема. Я обнаружил, что это моя проблема с последовательностью загрузки, потому что я пишу встраиваемый CSS, а затем вызываю скрипт response js, так что это выглядит так:
<script type="text/javascript" src="js/respond.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
Так должно быть
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="js/respond.min.js"></script>
ВСЕГДА связывайте таблицы стилей или пишите встроенный CSS перед js-скриптами!
Это может быть потому, что вы размещаете свой CSS на поддомене или CDN.
Respond.js работает, запрашивая первичную копию вашего CSS через Ajax, поэтому, если вы размещаете свои таблицы стилей в CDN (или поддомене), вам необходимо загрузить страницу прокси, чтобы включить междоменную связь.
Я смог сделать эту работу, но мне пришлось вставить сценарий в body тег.
<head>
<!-- Code -->
</head>
<body>
<!--[if lt IE 9]>
<script type="text/javascript" src="/js/respond.min.js"></script>
<![endif]-->
<!-- Site Code -->
</body>
Я не уверен, почему это работает, но это решило мою проблему.
Пожалуйста, обратите внимание: смотрите ответ Вена, так как response.js должен следовать за вашим CSS. В моей ситуации это было после CSS, но это не сработало бы в head по какой-то причине. Когда вставлено в body это сработало как задумано.
Respond.JS, который Bootstrap использует для включения медиазапросов в Internet Explorer 8, не обрабатывается @import файлы
Из репозитория GitHub: Respond.js не анализирует CSS, на который ссылается @import, и не работает с медиа-запросами внутри элементов стиля, так как эти стили нельзя повторно запрашивать для анализа.
Я должен был загрузить bootstrap.css и любой CSS, который содержит медиа-запросы в заголовке
<link href='css/bootstrap.min.css' rel='stylesheet' type='text/css' media='all' />
<link href='css/media.css' rel='stylesheet' type='text/css' media='all' />
Следующий метод импорта НЕ работает:
@import "bootstrap.min.css";
@import "media.css";
Убедитесь, что вы используете localhost или веб-сервер. "Из-за ограничений безопасности некоторые браузеры могут не разрешать этому сценарию работать с file:// urls (потому что он использует XMLHttpRequest). Запустите его на веб-сервере".
Источник: https://github.com/scottjehl/Respond
Если вы пытаетесь использовать Internet Explorer 11 для эмуляции более ранних версий Internet Explorer, будьте осторожны.
Internet Explorer 10 и более поздние версии не поддерживают IE условные комментарии. Первый выпуск Internet Explorer 11 не поддерживал их, даже когда он работал как более ранняя версия в режиме эмуляции. См. Условные комментарии больше не поддерживаются (MSDN).
Вы должны подтвердить, что у вас есть хотя бы первое обновление Internet Explorer 11. Если вы сомневаетесь, просто возьмите последнее.
Смотрите исправление ошибки в Условные комментарии не работают при эмуляции режимов документа с помощью F12 Developer Tools
И обсуждение вопроса переполнения стека. Почему Internet Explorer 11 не учитывает условные комментарии даже при эмуляции режима документов Internet Explorer 8?,
Рекомендуется включить html5shiv.js и response.js и убедиться, что он работает на локальном хосте, чтобы он работал нормально.
<!--[if lt IE 9]>
<script src="js/html5shiv.js"> </script>
<script src="js/respond.min.js"> </script>
<![endif]-->
Я надеюсь, что это поможет вам.
Я просто хотел добавить к этому, что example.html из github не работает "из коробки" для IE8 на XP!
Я обнаружил, что пример github не работает при копировании на мой сервер. Решение, которое я нашел, состояло в том, что пример при тестировании IE8 из XP требует 2 изменений!
Загрузите и извлеките содержимое https://github.com/scottjehl/Respond
Откройте файл example.html в междоменной папке. Замените "rawgithub.com" на "rawgit.com" (IE8/xp не нравится перенаправление при включении файлов CSS).
Измените "https" на "http", так как CDN, который они используют, использует SNI, который не поддерживается в XP, поэтому, если вы хотите поддерживать пользователей XP, то вам нужно это учитывать! (или меньше вы тратите много денег, чтобы получить выделенный IP на вашем CDN)
После того, как это было изменено, все хорошо работает с примером:-) Надеюсь, это кому-нибудь поможет:-) Рабочий пример example.html ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1?>
<title>Respond JS Test Page</title>
<link href="http://rawgit.com/scottjehl/Respond/master/test/test.css" rel="stylesheet"/>
<link href="http://rawgit.com/scottjehl/Respond/master/test/test2.css" media="screen and (min-width: 600px)" rel="stylesheet"/>
<script src="../dest/respond.src.js"></script>
<!-- Respond.js proxy on external server -->
<link href="http://rawgit.com/scottjehl/Respond/master/cross-domain/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link href="respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<script src="respond.proxy.js"></script>
</head>
<body>
<p>This is a visual test file for cross-domain proxy.</p>
<p>The media queries in the included CSS file simply change the body's background color depending on the browser width. If you see any colors aside from black, then the media queries are working in your browser. You can resize your browser window to see it change on the fly.</p>
<p id="attribute-test">Media-attributes are working too! This should be visible above 600px.</p>
</body>
</html>
Я решил эту проблему, исправив порядок следующих строк; они должны быть в следующем порядке:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
У меня была последняя строка X-UA-Compatible, и расположение столбцов не работало, за исключением моего локального.
Я выдернул свои волосы из-за этой проблемы и наконец нашел решение. Моей проблемой был CDN, который мы используем для хранения всех наших медиа.
я переехал respond.js и мои CSS-файлы все в одном домене, и все работает, как ожидалось. Я надеюсь, что это помогает кому-то в подобном затруднительном положении.
Вы должны разместить свою таблицу стилей <link> теги в пределах <head>, Даже если все браузеры будут загружать и отображать таблицы стилей, связанные вне <head>, это (было) против спецификации и respond.js не буду их обрабатывать.
В моем случае проблема заключалась в том, что один из файлов CSS не был доступен на сервере. response.js обрабатывает список файла css в рекурсивной функции. С первым провалом AJAX (req.status !== 200 && req.status !== 304)молча терпит неудачу. Мне пришлось исправить неправильный путь CSS, чтобы заставить его работать.
У меня была такая же проблема, но я решил ее, когда включил в свой проект Modernizr.
Respond.js не работает, если вы просматриваете страницу через файл://
Используйте вашу папку с сервером, тогда она будет работать, как http://localhost/yoursitename/.
У меня такая же проблема. Потратив так много времени, я понял, что это вызвано переменной LESS. Я переопределил переменную Bootstrap, чтобы отключить адаптивные функции:
@grid-float-breakpoint: 0;
Это было то, что сломало response.js.
Затем я изменил это на:
@grid-float-breakpoint: 0px;
и теперь это работает. Я надеюсь, что это кому-то поможет.
Использование polyfill.io также?
На случай, если это кому-нибудь еще поможет, я использовал http://polyfill.io/ и загружал его перед response.js. Мне нужно было переместить его после, и response.js начал работать, вот так:
<link rel='stylesheet' href='/css/screen.css' />
<script src='/js/vendor/respond.js'></script>
<script src='http://polyfill.io/'></script>
У меня были следующие ссылки в состоянии Internet Explorer. Я должен был вывести эти сценарии из состояния.
<!--[if lt IE 9]>
<script type="text/javascript" src="~/Content/js/html5shiv.js"></script>
<script type="text/javascript" src="~/Content/js/respond.min.js"></script>
<![endif]-->
Заменить на это:
<script type="text/javascript" src="~/Content/js/html5shiv.js"></script>
<script type="text/javascript" src="~/Content/js/respond.min.js"></script>
Похоже, что условие выполняет тот же эффект, как если бы вы включили эти сценарии в нижний колонтитул вместо заголовка.
Internet Explorer 8 и ниже может загружать только определенное количество файлов CSS, и они могут иметь только определенное максимальное количество строк. Если вы превысите эти пределы, CSS не загрузится. Попробуйте объединить содержимое CSS в один файл.
Во -первых, CSS для файлов html и html должны быть размещены в одном домене, что в конечном итоге работает!
во-вторых,
<base target="_blank" />
должно быть написано как
<base target="_blank"></base>
Я перепробовал все методы, которые упоминались выше. мы можем увидеть демонстрацию следующего http://scottjehl.github.io/Respond/test/test.html затем я попытался поместить файлы css в тот же домен html-файла, а затем обнаружил, что это успешно. Если вы поставили CSS в файле HTML, это не может быть сработало либо.
У меня была такая же проблема, и я решил ее, удалив <base> тег в <head>, Я нашел решение в вопросе переполнения стека Respond.js не работает в Internet Explorer 7, но пример H5BP работает. Это может быть вызвано:
<base />
и не
<base></base>
Internet Explorer 6 - 8 (я не уверен насчет 9) выдает колебание, когда нет закрывающего тега. Тогда все остальные head теги становятся дочерними элементами <base>, И все становится сломанным:/.
Надеюсь, это поможет!