Respond.js и Modernizr не работают в IE8 для медиа-запросов

У меня есть блог, который я пытаюсь заставить работать во всех браузерах, используя загрузку в качестве основы для проекта. Я использую Modernizr и Respond, чтобы заставить IE отвечать на медиа-запросы, но по какой-то причине сценарии не работают. Я размещаю их в неправильном порядке или другой JS-скрипт переопределяет их? Любая помощь будет принята с благодарностью.

    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/library/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/library/css/bootstrap-responsive.min.css">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:700' rel='stylesheet' type='text/css'>
<script src="<?php echo get_template_directory_uri(); ?>/library/js/modernizr.full.min.js"></script>
<script src="https://raw.github.com/scottjehl/Respond/master/respond.min.js"></script>          
    <!-- HTML Shim - Enables usage of all HTML5 elements in Internet Explorer -->
    <!--[if lt IE 9]>
        <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write(unescape('%3Cscript src="<?php echo get_template_directory_uri(); ?>/library/js/libs/jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>

    <!-- Selectivizr - Enable CSS3 selectors for IE 6-8 -->
    <!--[if (gte IE 6)&(lte IE 8)]>
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/js/libs/selectivizr-min.js"></script>
    <![endif]-->
    <script src="<?php echo get_template_directory_uri(); ?>/library/js/bootstrap-tooltip.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/library/js/bootstrap-popover.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/library/js/bootstrap-typeahead.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/library/js/site.js"></script>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
    <!-- wordpress head functions -->
    <?php wp_head(); ?>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>

jquery polyfills modernizr
person Tiffani    schedule 09.11.2012    source источник
comment
Эй, ты когда-нибудь решил это? Кажется, что несколько из приведенных ниже ответов - вместе взятые - являются ответом. Можете ли вы рассказать нам, как это было, чтобы мы могли учиться на вашем опыте? Насколько я могу судить, есть 3 проблемы. 1.) исходный заказ. 2.) добавление только экрана и в правило @media, - и 3.) возможные проблемы с вложенностью и SASS. Любое понимание было бы потрясающим.   -  person sheriffderek    schedule 18.12.2013

Ответы (3)


arrow_upward
5
arrow_downward

Попробуйте двигаться

<script src="https://raw.github.com/scottjehl/Respond/master/respond.min.js"></script>

Чтобы перейти по ссылке на вашу последнюю таблицу стилей (возможно, вы ее пропустили, но она есть внизу).

person ac_    schedule 06.03.2013

arrow_upward
3
arrow_downward

Простое добавление response.js не исправляет медиа-запросы. Я использовал css3-mediaqueries.js и написал свои медиа-запросы следующим образом:

    @media screen and (min-width: 768px) and (max-width: 979px) {
      // css;
    }

вместо:

    @media (min-width: 768px) and (max-width: 979px) {
      // css;
    }
person Dinky Dana    schedule 21.03.2013

arrow_upward
2
arrow_downward

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

<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>

ВСЕГДА вызывайте таблицы стилей перед скриптами!

person Wen    schedule 30.05.2013