Bootstrap CDN 在 IE8 中不工作

Question

我正在尝试使用 Bootstrap CDN 发布我的网站并希望它在 IE8 中正常工作。但是，当在我的网络服务器上引用 Bootstrap CSS 时，Bootstrap 可以正常工作，但是当使用 CDN 时，页面布局会中断。

托管在我的网络服务器上的以下简短示例在 IE11 上的 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="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是从https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css下载的文件。

但是，将 bootstrap.min.css 替换为 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css 会破坏布局。 "right side" 被放置在 "left side" 的底部。

导致问题的原因是什么？

Answer 1

而不是

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

使用

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

（省略"https:"）

Answer 2

导致问题的原因是respond.js的限制。根据 README of respond.js，respond.js 默认情况下无法解析托管在 CDN 上的样式表。因此，需要添加代码。下面是在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是从https://github.com/scottjehl/Respond/raw/1.4.2/cross-domain/respond.proxy.gif下载的文件。 respond.proxy.js 是从 https://github.com/scottjehl/Respond/raw/1.4.2/cross-domain/respond.proxy.js 下载的文件。

Answer 3

我想，这不是问题。尝试从任何服务器运行您的项目。像 localhost 或 webserver。我更喜欢使用 webserver。可能问题会得到解决。

Bootstrap CDN 在 IE8 中不工作

Bootstrap CDN does not work in IE8

html

css

twitter-bootstrap

cdn