如何使用Selectivizr使Bourbon Neat网格在IE8中工作？

Question

I have the unfortunate task of making Bourbon Neat work with ie8. 我的不幸任务是使Bourbon Neat与ie8一起使用。 Thoughtbot's docs say you use Selectivizr for this. Thoughtbot的文档说您为此使用Selectivizr。 I followed Selectivizr's instructions and I see nothing different when testing in ie8. 我按照Selectivizr的说明进行，在ie8中进行测试时没有发现任何不同。 I also don't understand what if any fallback css is required. 我也不清楚如果需要任何备用CSS。 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>

Answer 1

selectivizr.js is dependent on jquery (or similar libraries). selectivizr.js依赖于jquery（或类似的库）。 Make sure that you're loading jquery BEFORE selectivizr... 确保在选择之前加载jquery ...

<!--[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]-->

Answer 2

Have you tried including HTML5 shiv ? 您是否尝试过包含HTML5 shiv ？

Without that (or similar), IE8 won't be able to style elements that are new to HTML5 (eg. <section> , <nav> , etc). 如果没有该名称（或类似名称），则IE8将无法设置HTML5的新元素的样式（例如<section> ， <nav>等）。 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. 对我来说，selectivizr.js确实允许Neat与IE8一起使用，但是如果您使用的是HTML5元素，那么即使没有selectivizr，Neat也无法在没有HTML5 shiv的IE8中对它们进行样式设置。 (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). （注：这实际上不是Neat 本身的问题-这是更普遍的问题，源于IE8是HTML5之前的浏览器）。

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. 有效地，selectivizr.js修复了IE8无法识别的选择器问题，而HTML5 shiv修复了无法识别的元素的问题：如果您使用的是HTML5元素，那么为了使所有组件都能正常工作，您可能会需要两者。

如何使用Selectivizr使Bourbon Neat网格在IE8中工作？

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-10-29 17:30:24

解决方案2
1 2014-03-25 13:07:31

如何使用Selectivizr使Bourbon Neat网格在IE8中工作？

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-10-29 17:30:24

解决方案2 1 2014-03-25 13:07:31

解决方案1
1 已采纳 2013-10-29 17:30:24

解决方案2
1 2014-03-25 13:07:31