CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcdn
anqooqie
anqooqie

Reputation: 435

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?

Upvotes: 0

Views: 1209

Answers (3)

Sarower Jahan
Sarower Jahan

Reputation: 1495

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.

Upvotes: 0

anqooqie
anqooqie

Reputation: 435

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.

Upvotes: 2

Yesthe Cia
Yesthe Cia

Reputation: 538

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:")

Upvotes: 0

Related Questions