归档 2014年5月13日

百度，新浪等站点提供了CDN JavaScript公用库，包含了前端开发常用的JavaScript库文件与CSS样式表，开发者可以很方便地从这些CDN引用所需的样式文件，还可以保证不错的响应速度。

bootcss中文站、百度的bootstrap库引用方式如下所示：

<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />

然而，在使用百度和新浪CDN的bootstrap 3.0.3时，笔者发现在IE下部分glyphicons图标无法正常显示，而在chrome浏览器下可以显示。

例如https://bookshadow.com/weblog/2014/05/13/bootstrap-carousel-js/中的轮播组件，在chrome下可以看到carousel左右两侧的三角形glyphicons图标，如下图所示：

而在IE浏览器下却无法显示，效果见下图。

查阅stackoverflow上的相关问答，发现此贴中也提到了相同的问题：http://stackoverflow.com/questions/19026479/only-some-glyphicons-showing-in-ie

用户olahell的回答比较妥当：

I have found the solution. It was quite simple. Unfortunately I won't be able ...

Bootstrap Carousel是一款实用的轮播组件，示例如下：

1.  
2.  
3.  

恐龙星球

远古外星人

谣言粉碎机

代码如下：

<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
 <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
 <li data-target="#carousel-example" data-slide-to="1"></li>
 <li data-target="#carousel-example" data-slide-to="2"></li>
 </ol><!-- Wrapper for slides -->
 <div class="carousel-inner">
 <div class="item active"> ...