CDN bootstrap glyphicons图标IE下无法显示

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

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

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

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

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

bootstrap-carousel-glyphicons-chrome

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

bootstrap-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 to use Glyphicons.
我已经找到了解决方案。十分简单,不幸的是我无法使用Glyphicons

IE have a setting to restrict font download. This is enabled by group policy and cannot be changed on standard workstations. I have been able to recreate the same behavior on my own laptop be restricting font download.
IE有一项严格限制字体下载的设置。这由组策略启用并且在标准工作环境下无法更改。我通过限制字体下载已经在我的笔记本上重现了这个问题。

Se this article for further explanation: http://msdn.microsoft.com/en-us/library/ms533034(v=vs.85).aspx
参考此文获取更详细的解释

如果的确需要使用glyphicons,需在站点本地添加bootstrap库的拷贝才可正常显示字体文件。

本文链接:http://bookshadow.com/weblog/2014/05/13/bootstrap-glyphicons-cdn-ie-not-work/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

如果您喜欢这篇博文,欢迎您捐赠书影博客: ,查看支付宝二维码