Respond.js не работает в Internet Explorer 7, но пример H5BP работает

Этот отзывчивый пример из H5BP хорошо работает в Internet Explorer 7, Internet Explorer 8 и Internet Explorer 9, но когда я использую H5BP в своем собственном проекте, он не работает только в Internet Explorer 7. Я также попытался опустить H5BP и использовать чисто html5shiv + Respond.js (также с selectivzr.js), но я столкнулся с той же проблемой (она не работает в Internet Explorer 7). И я не вижу никакой ошибки JavaScript/ консоли.

Попробовав css3-mediaqueries.js, я обнаружил, что это хорошо работает в Internet Explorer 7, Internet Explorer 8 и Internet Explorer 9, но я заметил, что переход (чтение медиазапросов) задерживается почти на секунду, поэтому я не хочу использовать Это. Respond.js намного быстрее.

Я прочитал "проблему между доменами /CDN" на странице response.js, и мой тестовый проект находится в корне поддоменов (например, поддомен [точка]mydomain[точка]tld/), так что если это проблема почему он хорошо работает в Internet Explorer 8 и Internet Explorer 9, но не в Internet Explorer 7?

Не работает в Internet Explorer 7 означает, что столбцы не сворачиваются только в Internet Explorer 7, медиа-запросы не читаются.

Я скачал демо-версию initializr с html5shiv.js и response.js, и она хорошо работает на моем поддомене, поэтому проблема с кросс-доменом /CDN не является проблемой: /

В Internet Explorer я отключил " Включить защищенный режим", и теперь он работает. Но почему онлайн-примеры (H5BP и initializr), несмотря на то, что этот параметр безопасности включен, работают?

Это глава последнего теста, который я сделал:

<!DOCTYPE html>
<html dir="ltr" lang="it">
<head>
    <link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,400italic,700italic,300italic,300&subset=latin,latin-ext,greek-ext,greek" rel="stylesheet" type="text/css" />
    <meta charset="<?php echo $charset; ?>" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title><?php echo $cur_title; ?></title>
    <meta name="<?php echo $cur_desc; ?>" />
    <link rel="canonical" href="<?php echo $cur_canonical; ?>" />
    <meta name="author" content="<?php echo $author; ?>" />
    <base href="<?php echo $cur_base; ?>" />
    <meta http-equiv="imagetoolbar" content="no" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
    <link rel="shortcut icon" href="apple-touch-icon-57x57.png" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />

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

    <!--[if lt IE 9]>
        <script type="text/javascript" src="js/html5shiv.js"></script>
    <![endif]-->

    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

    <!--[if (gte IE 6)&(lte IE 8)]>
        <script type="text/javascript" src="selectivizr.js"></script>
    <![endif]-->

    <link rel="stylesheet" type="text/css" href="css/normalize.min.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
    <script type="text/javascript" src="js/jquery.quicksearch.js"></script>
    <script type="text/javascript">var base = '<?php echo $base; ?>';</script>
    <script type="text/javascript">var isMobile = <?php echo $isMobile; ?>;</script>
    <script type="text/javascript" src="js/common.js<?php echo '?'.time(); ?>"></script>
</head>
Источник

2 ответа

Решение

РЕШИТЬ

Проблема в IE7 заключается в теге "base", как вы можете видеть в этом примере, я добавил в шаблон H5BP отзывчивый тег "base" и теперь больше не работает в IE7. Вот почему это не работает на IE7.

Respond.js GitHub выпускает # 1

Respond.js GitHub выпускает #2 (https://github[точка]com/scottjehl/Respond/ Issues/137)

Тестовая страница пользователя GitHub с пояснениями и исправлениями (http://webdesign[dot]web3.lu/mediaqueries_polyfill.html)

Источник

Просто мелочь для всех, кто интересуется, почему HPBP просто работает, когда он "не должен"… из-за отсутствия лучшего термина.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Это позволяет браузеру использовать лучший доступный движок рендеринга, т.е. IE10. Если вы используете IE, скажем 10, и просто измените режим рендеринга в инструментах разработки, просто закомментируйте это для тестирования.

Источник
Другие вопросы по тегам