问题描述
我正在尝试使用Bootstrap CDN发布我的网站，并希望它在IE8中正常工作。
但是，当在我的Web服务器上引用Bootstrap CSS时，Bootstrap可以完美地工作，但是当使用CDN时，页面的布局将中断。
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.
<!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 是文件从。
但是，替换 bootstrap.min.css 至 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?
推荐答案
引起问题的原因是response.js的局限性。
根据 ，默认情况下，response.js无法解析CDN上托管的样式表。
因此，需要添加代码。
以下是在IE8中正常工作的示例。
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 是文件从 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 。
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.
这篇关于Bootstrap CDN在IE8中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！