Bootstrap 3 with respond.js and html5shiv.js still not working on IE8

问题

I have a website which is running Bootstrap 3 and working perfectly on all browsers except IE8. It's the problem where the media queries aren't supported, so the content stretches as if it was run on a mobile device.

I have tried including respond.js, html5shiv.js and the html5shim from Google. Also the meta http-equiv-tag is included. The media queries still don't seem to work.

Also, I know respond.js doesn't work locally because of it's xmlHttpRequest-thingy, but this site is running on a webserver.

I've also made sure both respond.js and html5shiv.js are found and the links are not broken.

Any ideas?

回答1:

Okay so the non-responsive css file wasn't exactly what we were looking for. However, we found the problem:

IE8 doesn't seem to like the @import-property.

We used a global css file which imported the necessary styles. When moving all stylesheets to the header and including them with a normal link-tag, it works.

It's weird though, the regular bootstrap styling (buttons, backgrounds and such) got imported properly. The grid system was not. I guess Internet Explorer works in mysterious and retarded ways.

回答2:

I had the same problem. In my case it was the QUIRKS mode that messed it up. IE can be forced to go into Quirks mode by replacing the standard (Bootstrap 3.0 suggested):

<!DOCTYPE HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

回答3:

Always make sure that you load the following scripts after loading jQuery.

Especially in WordPress and other frameworks some people tend to include jQuery just before the closing tag and therefore after the html5shiv.js and respond.js script, which causes issues in IE8

<!-- Include first -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.js"></script>
<![endif]-->

回答4:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
    </head>

if you want to try in local...try through localhost, or create a QA server and set the content and try. we need respond.js for bootstrap 3 and it wont work in local machine if we just put it in js and append it to html in header. It will say access denied. it works only through server as ie have security restriction. :P

来源：https://stackoverflow.com/questions/18873969/bootstrap-3-with-respond-js-and-html5shiv-js-still-not-working-on-ie8

标签

internet-explorer-8

media-queries

twitter-bootstrap-3

html5shiv

respond.js