Rails 4 Bootstrap 3 Header Issue in IE 8

Question

I have attached screenshots at the bottom. I have tried the following the tips from IE8 issue with Twitter Bootstrap 3 to no avail. I have tried adding respond.js, adding the <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> meta tag, and ensuring my markup is correct. I have also ensured that both the html5shiv and respond.js are being loaded. Any idea what I'm doing wrong?

Relevant code

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <%= stylesheet_link_tag "application", :media => "all" %>

  <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
  <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
    <script src="../../vendor/assets/js/respond.js"></script>
  <![endif]-->
</head>

<body>
  <header class="navbar navbar-inverse navbar-static-top" role='navigation'>
    <div class='navbar-header'>
      <a class="navbar-brand" href="/">Byrex</a>
    </div>
    <ul class="nav navbar-nav">    
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <ul class="dropdown-menu">
          <li></li>
          <li></li>
        </ul>
      </li>
    </ul>
  </header>
</body>

Expected/All Other Browsers

Other Browsers

IE 8

IE 8

AWM · Accepted Answer · 2015-07-23T12:30:50.317

2

You might try to use other sources of your scripts (and shiv 3.7):

<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>

edited Jul 23 '15 at 12:30

answered Jan 20 '14 at 22:18

AWM

1,070
11
22

Updating the scripts to use the CDN solved my issue. My guess is updating the html5shiv from 3.6.1 to 3.7 fixed the issue. IE 8 is a giant(and ugly) black box for me. – Josh Jan 20 '14 at 23:01
Great! I updated my answer. Yeah, supporting IE8 annoys me as well. – AWM Jan 20 '14 at 23:05

score 0 · Answer 2 · answered Jan 20 '14 at 21:17

0

IE 8 just blows, but that being said, it might help if you include calls for if the browser is IE8 --

<!--[if IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
<script src="../../vendor/assets/js/respond.js"></script>

I removed the "lt" because in recent experience, I had to do so to get IE8 to recognize it. You can also throw in custom overrides between those tags to fix any other IE8 stupidity.

answered Jan 20 '14 at 21:17

Noah Davis

909
1
12
26

I'll give it a go but I can see the scripts being loaded in firebug so I don't think that's the issue. I'll edit the question to reflect that. – Josh Jan 20 '14 at 21:19

Rails 4 Bootstrap 3 Header Issue in IE 8

2 Answers2