How do I use Selectivizr to make the Bourbon Neat grid work in IE8?

StackOverflow https://stackoverflow.com/questions/19274908

Вопрос

I have the unfortunate task of making Bourbon Neat work with ie8. Thoughtbot's docs say you use Selectivizr for this. I followed Selectivizr's instructions and I see nothing different when testing in ie8. I also don't understand what if any fallback css is required. Any ideas or solutions? Most appreciated!

<!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>
Это было полезно?

Решение

selectivizr.js is dependent on jquery (or similar libraries). Make sure that you're loading jquery BEFORE 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]-->

Другие советы

Have you tried including HTML5 shiv?

Without that (or similar), IE8 won't be able to style elements that are new to HTML5 (eg. <section>, <nav>, etc). For me, selectivizr.js does indeed allow Neat to work with IE8, but if you're using HTML5 elements then even with selectivizr Neat won't be able to style them in IE8 without the HTML5 shiv. (nb. that's not actually a problem with Neat per se - it's a more general problem that stems from IE8 being a pre-HTML5 browser).

Effectively, selectivizr.js fixes the problems with selectors that IE8 doesn't recognise, while HTML5 shiv fixes the problems with unrecognised elements: if you're using HTML5 elements then in order to get everything working smoothly, you'll probably need both.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top