Bootstrap CDN does not work in IE8

问题

I am trying to publish my website using Bootstrap CDN and want it to work correctly in IE8. However, when referencing the Bootstrap CSS on my web server, Bootstrap works perfectly but, when using CDN, the layout of the page will break.

The following brief example hosted on my web server works correctly in IE8 emulation mode on IE11.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>brief example</title>
    <link href="bootstrap.min.css" rel="stylesheet" />
    <!--[if lt IE 9]>
      <script type="text/javascript" src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script type="text/javascript" src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-6">
          left side
        </div>
        <div class="col-sm-6">
          right side
        </div>
      </div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

bootstrap.min.css is the file downloaded from https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css.

However, replacing bootstrap.min.css to https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css makes the layout broken. "right side" gets placed on the bottom side of "left side".

What causes the problem?

回答1:

What caused the problem is the limitation of respond.js. According to README of respond.js, respond.js can not parse stylesheets hosted on CDNs by default. So, adding codes is required. The following is the example working correctly in IE8.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>brief example</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <!--[if lt IE 9]>
      <script type="text/javascript" src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script type="text/javascript" src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
      <link href="respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
      <script src="respond.proxy.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-6">
          left side
        </div>
        <div class="col-sm-6">
          right side
        </div>
      </div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

respond.proxy.gif is the file downloaded from https://github.com/scottjehl/Respond/raw/1.4.2/cross-domain/respond.proxy.gif. respond.proxy.js is the file downloaded from https://github.com/scottjehl/Respond/raw/1.4.2/cross-domain/respond.proxy.js.

回答2:

Instead of

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

Use

//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

(omit the "https:")

回答3:

I think, this is not problem. Try to run your project from any server. like localhost or webserver. I prefer to use webserver. May be problem will be solved.

来源：https://stackoverflow.com/questions/34320921/bootstrap-cdn-does-not-work-in-ie8

标签

html

css

twitter-bootstrap

cdn