Как мне использовать Selectivizr для работы сетки Bourbon Neat в IE8?

У меня есть неудачная задача заставить Bourbon Neat работать с ie8. Документы Thoughtbot говорят, что вы используете Selectivizr для этого. Я следовал инструкциям Selectivizr и не вижу ничего другого при тестировании в ie8. Я также не понимаю, что если требуется какой-либо запасной CSS. Есть идеи или решения? Самый ценный!

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="description" content="">

<!-- FONTS -->
<!--Typekit - Adrianna Extended Demibold-->
<script type="text/javascript" src="//use.typekit.net/sjw4zgk.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<!-- AUTO RELOAD FOR HAMMER -->

        <!-- Hammer reload -->
          <script>
            setInterval(function(){
              try {
                if(typeof ws != 'undefined' && ws.readyState == 1){return true;}
                ws = new WebSocket('ws://'+(location.host || 'localhost').split(':')[0]+':35353')
                ws.onopen = function(){ws.onclose = function(){document.location.reload()}}
                ws.onmessage = function(){
                  var links = document.getElementsByTagName('link'); 
                    for (var i = 0; i < links.length;i++) { 
                    var link = links[i]; 
                    if (link.rel === 'stylesheet' && !link.href.match(/typekit/)) { 
                      href = link.href.replace(/((&|\?)hammer=)[^&]+/,''); 
                      link.href = href + (href.indexOf('?')>=0?'&':'?') + 'hammer='+(new Date().valueOf());
                    }
                  }
                }
              }catch(e){}
            }, 1000)
          </script>
        <!-- /Hammer reload -->


<!-- CSS/SCSS -->
<link rel='stylesheet' href='css/ostrich-sans.css'>
<link rel='stylesheet' href='css/font-awesome.css'>
<link rel='stylesheet' href='css/normalize.css'>
<link rel='stylesheet' href='css/responsive-nav.css'>
<link rel='stylesheet' href='css/style.css'>

<!-- IOS LINK STYLES -->
<style type="text/css">
/*.applelinks a {color:#c4d52d; display:inline-block; padding: 10px 0;}*/
/*Disable touch-highlight
-webkit-tap-highlight-color: rgba(0,0,0,0); */
</style>

<!-- JS MODERNIZR -->
<script src='js/modernizr.custom.87213.js'></script>

<link href="favicon.ico" rel="shortcut icon">
<link href="apple-touch-icon.png" rel="apple-touch-icon">


<title>Title</title>

<!-- ZEPTO FALLBACK TO JQUERY -->
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/zepto.min' : 'js/jquery.min') +
'.js><\/script>')
</script>

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

</head>

<body>

<header>
<nav class="nav-collapse">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
</header>

  <section class="sec-one">

      <aside>Aside</aside>
      <article>Article</article>

  </section>

    <section class="sec-two">
      <aside>Aside</aside>
      <article>Article</article>
  </section>

    <section class="sec-three">
      <aside>Aside</aside>
      <article>Article</article>

    <p>Content copy</p>


  </section>



<script src='js/responsive-nav.js'></script>
<script src='js/app.js'></script>

<!-- INITIATE RESONSIVE-NAV -->
<script>
    var navigation = responsiveNav(".nav-collapse", {
        label: '<i class=\"icon-reorder icon-2x\"></i>'
    });
</script>


</body>

</html>

2 ответа

Решение

selectivizr.js зависит от jquery (или похожих библиотек). Убедитесь, что вы загружаете jquery ПЕРЕД selectivizr...

<!--[if lte IE 8]>

**<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>**

<script type="text/javascript" src="selectivizr.js"></script>
<![endif]--> 

Вы пробовали включить HTML5 Shiv?

Без этого (или подобного) IE8 не сможет стилизовать элементы, которые являются новыми для HTML5 (например, <section>, <nav>, так далее). Для меня selectivizr.js действительно позволяет Neat работать с IE8, но если вы используете элементы HTML5, то даже с selectivizr Neat не сможет стилизовать их в IE8 без HTML5. (примечание: на самом деле это не проблема Neat как таковой - это более общая проблема, связанная с тем, что IE8 является браузером до HTML5).

По сути, selectivizr.js исправляет проблемы с селекторами, которые IE8 не распознает, в то время как HTML5 shiv устраняет проблемы с нераспознанными элементами: если вы используете элементы HTML5, то для того, чтобы все работало гладко, вам, вероятно, потребуются оба варианта.

Другие вопросы по тегам