Подтвердить что ты не робот

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 работает. Я тестирую на реальном веб-сервере.

4b9b3361

ОТВЕТЫ

Ответ 1

Такая же проблема. Я обнаружил, что это проблема последовательности загрузки, потому что я пишу CSS inline, а затем вызываю js script, поэтому он выглядит как

<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-скриптами!

Ответ 2

Это может быть потому, что вы размещаете свой CSS на субдомене или CDN.

Respond.js работает, запрашивая оригинальную копию вашего CSS с помощью Ajax, поэтому, если вы размещаете свои таблицы стилей на CDN (или субдомен), вам необходимо загрузить страницу прокси, чтобы разрешить междоменную связь.

Ответ 3

Мне удалось выполнить эту работу, но мне пришлось вставить script в тег body.

<head>
    <!-- Code -->
</head>
<body> 
    <!--[if lt IE 9]>
        <script type="text/javascript" src="/js/respond.min.js"></script>
    <![endif]-->

    <!-- Site Code -->
</body>

Я не уверен, почему это работает, но оно решило мою проблему.

Обратите внимание: см. ответ Wen, поскольку response.js должен появиться после вашего CSS. В моей ситуации это было после CSS, но по какой-то причине это не сработало бы в head. При вставке в body он работал по назначению.

Ответ 4

Respond., что означает 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";

Ответ 5

Убедитесь, что вы используете локальный хост или веб-сервер. "Из-за ограничений безопасности некоторые браузеры могут не разрешить этому script работать с файлом://urls (потому что он использует XMLHttpRequest) Запустите его на веб-сервере."

Источник: https://github.com/scottjehl/Respond

Ответ 6

Лучшей практикой является включение html5shiv.js и response.js и убедитесь, что вы запускаете его в локальном хосте, поэтому он будет работать нормально.

<!--[if lt IE 9]>

    <script src="js/html5shiv.js"> </script>
    <script src="js/respond.min.js"> </script>

<![endif]-->

Надеюсь, это поможет вам.

Ответ 7

Если вы пытаетесь использовать 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?.

Ответ 8

Эта ошибка возникает из-за того, что script "reply.min.js" использует Ajax или что-то подобное. Вы должны разместить свой проект на локальном или удаленном сервере, например WAMP или XAMPP.

Ответ 9

Я просто хотел добавить к этому, что example.html из github не работает из коробки для IE8 на XP!

Я обнаружил, что пример github не работал при копировании на мой сервер. Решение, которое я нашел, состояло в том, что для примера при тестировании с IE8 из XP требуется 2 изменения!

  • Downlaod и извлеките содержимое 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 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>

Ответ 10

Я решил эту проблему, исправив порядок следующих строк; они должны быть в следующем порядке:

<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, а макеты столбцов не работали, за исключением локальных.

Ответ 11

У меня была такая же проблема, но я решил ее, когда включил Modernizr в свой проект.

Ответ 12

Вы должны поместить теги <link> в таблицу стилей в <head>. Несмотря на то, что все браузеры будут загружать и отображать таблицы стилей, связанные за пределами <head>, это (было) против spec и respond.js не будет обрабатывать их.

Ответ 13

У меня были следующие ссылки в режиме 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>

Похоже, что условие выполняет тот же эффект, как если бы вы включили эти скрипты в нижний колонтитул вместо головы.

Ответ 14

Я вытаскиваю волосы из этой проблемы и, наконец, понял решение. Моя проблема заключалась в CDN, который мы используем для хранения всех наших медиа.

Я переместил respond.js и мои файлы CSS все в одном домене, и все работало, как ожидалось. Надеюсь, это поможет кому-то в подобном затруднительном положении.

Ответ 15

Internet Explorer 8 и ниже могут загружать только определенное количество файлов CSS, и они могут иметь только определенное количество строк. Если вы перейдете эти ограничения, CSS не загрузится. Попробуйте объединить содержимое CSS в один файл.

Ответ 16

Использование polyfill.io также?

Если это помогает кому-то еще, я использовал polyfill.io и загружал его до reply.js, Мне нужно было переместить его после того, как и response.js начал работать, например:

<link rel='stylesheet' href='/css/screen.css' />
<script src='/js/vendor/respond.js'></script>
<script src='http://polyfill.io/'></script>

Ответ 17

во-первых, Css для html и html файлов должен размещаться в том же домене, который в итоге работает!

во-вторых,

<base target="_blank" />

должен быть написан как

<base target="_blank"></base>

Я пробовал все методы, упомянутые выше. мы можем увидеть демонстрацию следующих http://scottjehl.github.io/Respond/test/test.html затем я попытался поместить файлы css в один и тот же домен html файла, а затем нашел его успешным. Если вы поместите css в html файл, это тоже не сработает.

Ответ 18

У меня была та же проблема. Проведя так много времени, я понял, что это вызвано переменной LESS. Я отключил переменную Bootstrap, чтобы отключить отзывчивые функции:

@grid-float-breakpoint: 0;

Это то, что сломало response.js.

Затем я изменил его на:

@grid-float-breakpoint: 0px;

и теперь он работает. Я надеюсь, что это поможет кому-то.

Ответ 19

В моем случае проблема была в том, что один из css файлов был недоступен на сервере. response.js обрабатывает список css файла в рекурсивной функции. При первом отказе ajax (req.status !== 200 && req.status !== 304) он терпит неудачу. Я должен был исправить неправильный путь css, чтобы заставить его работать.

Ответ 20

Respond.js не работает, если вы просматриваете страницу через файл://
Используйте свою папку с сервером, тогда она будет работать, например http://localhost/yoursitename/.

Ответ 21

У меня была та же проблема и разрешил ее, удалив тег <base> в <head>. Я нашел решение в вопросе Respond.js не работает в Internet Explorer 7, но пример H5BP работает. Это может быть вызвано:

<base />

а не

<base></base>

Internet Explorer 6-8 (я не уверен, что 9) бросить шаткий, когда нет закрывающего тега. Затем все остальные теги head становятся дочерними элементами <base>. И все сломается:/.

Я надеюсь, что это поможет!