Twitter bootstrap 3 RC2 - Navigation in IE8 not working

Question

I'm using Twitter Bootstrap 3 RC2 to create a navbar at the top of my page which works fine except in IE8.

In IE8 is acts like as if the browser was made small, so that the menu collapses for mobile view. But this is not the case.

Now i know that TB3 is still a work in progress. But i'd like to know if anyone have a solution for this here.

---

If you want to check my problem with IE8, then look here:

http://jsfiddle.net/DnwJN/embedded/result/

(you need the direct link, because the JSFiddle it self doesn't work with IE8)

And here is the JSFiddle:

http://jsfiddle.net/DnwJN/

---

You'll see that the navbar works fine in every other browser. Even IE9. But not IE8. And TB3 does support IE8. They only dropped support for IE7 and below.

Anyone have a solution for this problem?

---

The code from the fiddle

<nav class="navbar" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Title</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
          <input type="text" class="form-control" placeholder="Search" />
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
        </ul>

      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

Answer 1

Hope this helps...

From http://getbootstrap.com/getting-started/ :

    <!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
    <script src="js/respond.js"></script>
</body>

Answer 2

Also, take note of the fact that you have to include this code:

<!--[if lt IE 9]>
  <script src="${rc.getContextPath()}/js/vendor/html5shiv.js"></script>
  <script src="${rc.getContextPath()}/js/vendor/respond.min.js"></script>
<![endif]-->

AFTER all the css has been included for it to work properly.