CODEWITHSUNDEEP
ruby-on-railsrubytwitter-bootstraptwitter-bootstrap-3
Josh
Josh

Reputation: 5721

Rails 4 Bootstrap 3 Header Issue in IE 8

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

Upvotes: 2

Views: 767

Answers (2)

AWM
AWM

Reputation: 1140

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>

Upvotes: 2

frenchloaf
frenchloaf

Reputation: 1054

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.

Upvotes: 0

Related Questions