html - Bootstrap 字形图标未在 IE 和 Safari 中显示

Question

我的 ASP.NET MVC 应用程序中有一个奇怪的问题: Bootstrap 字形在 IE 和 Safari 中未显示，但在 Google Chrome 和 FireFox 中成功显示。

我检查过在 less 文件中我有正确的字体文件路径(.eot 和其他)。但它在 IE 和 Safari 中不起作用。 当在浏览器检查器中查看 html 和 css 时，我看到 glyphicon 的类具有被击中的属性内容，但在 Chrome 中它没有被击中。 我还在 IE 设置中打开了允许字体加载，但它没有帮助。 我正在使用 Bootstrap 3.3.6。

我在 IE 11、Edge 和 Safari 中遇到了这个问题。

请告诉我如何解决这个问题？

更新。

            <p class="input-group">
                <input name="startDate" type="text" uib-datepicker-popup="{{format}}" ng-model="startDate" is-open="status.startDateOpened" datepicker-options="dateOptions" close-text="Close" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="openStartDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </p>

Answer 1

经过StackOverflow的一番搜索，好像以前也遇到过这个问题。问题可能与 HTTP header Cache-Control: no-cache 字体有关。虽然这适用于 HTTP，但在 HTTPS 上它会导致 Internet Explorer 忽略下载的字体。

我最好的猜测是这是这种行为的变体:http://support.microsoft.com/kb/815313

因此，如果您看到 IE 在开发人员工具 WebView 中处理每种字体，则可能值得检查您是否有 Cache-Control header 并将其删除。

引用另一个案例:Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)

还有一个，我找到的最初可能的解决方案:@font-face EOT not loading over HTTPS