引导程序 3.2.0 字形图标未显示在 Internet Explorer 中答案

【问题标题】：bootstrap 3.2.0 glyphicons are not displaying in internet explorer引导程序 3.2.0 字形图标未显示在 Internet Explorer 中
【发布时间】：2014-10-06 12:36:06
【问题描述】：

我正在使用 twitter bootstrap 3.2.0 并且我使用了一些 glyphicons，它们在 ff、chrome 和 opera 中可以正常工作，但它们没有显示在 Internet Explorer 中。

奇怪的是，如果我打开 getbootstrap.com 网站并查看“组件”部分，即使它们没有正确显示，所以我怀疑我这边是否存在任何实施问题。

还有其他人有类似的问题吗？还是对这种行为有所了解？

这是它在我的 Internet Explorer 11 中的外观截图

http://we.tl/nsDnTiZqoZ

【问题讨论】：

检查网络标签，如果它为它使用的字体抛出 404..
不，没有 404，一切似乎都很好。
可能你安装了奇怪的字体或 IE 插件。在检查器中检查 IE 使用的实际字体。
我不认为是插件问题，因为我用IE只是为了测试，所以我没有安装插件。 CSS 中使用的字体系列称为“Glyphicons Halflings”。这应该是正确的，不是吗？

标签： twitter-bootstrap internet-explorer glyphicons

【解决方案1】：

如果您在使用 Java 应用程序时遇到此问题，解决方案可能是创建一个 Filter（javax.servlet.Filter) 防止在对字体文件夹的请求的响应中设置这些标头。这似乎适用于我们的项目。确保过滤器被配置为 web.xml 文件中的第一个组件。更多信息在这里How do delete a HTTP response header?

【讨论】：

【解决方案2】：

从 CDN 加载 bootstrap.css 而不是应用程序中的资源文件夹。从 CDN 加载后它对我有用。

签入网络选项卡有哪些文件正在使用 glyphicon-screenshot 或未加载的图标。就我而言，它是“glyphicon-screenshot”未在 IE 11 浏览器中加载。

在检查之前，字体已启用

未加载的图标将在样式选项卡 f12 调试工具中显示错误。

【讨论】：

【解决方案3】：

在我们的案例中，我们的企业 Windows 10 图像具有阻止仅影响 IE11 的不受信任字体的设置。 Chrome/FF/Edge 都正确显示字体。在我的个人机器（不是我的公司机器）上以 IE11 访问我们的网站显示字体非常好。

详情请看这篇文章：

https://blogs.technet.microsoft.com/secguide/2017/06/15/dropping-the-untrusted-font-blocking-setting/

【讨论】：

【解决方案4】：

回答太晚了，但最近我遇到了 Angular 4 + grails 作为后端的问题。对我来说，grails 中 webapp 文件夹中的所有资源都在设置

Cache-control : 'no-store'.

并且没有像 modified-since 或 expires 等标头。这是导致问题的原因。我像下面这样更新了 application.yml 来解决这个问题，它对我有用。

grails:
    resources:
        cachePeriod: 10

这将设置如下响应标头

Cache-Control   : max-age=10

【讨论】：

【解决方案5】：

就像我在这个帖子中提到的那样：github

问题是，浏览器（IE 11）需要接收：

静态内容文件需要有 Cache-Control 和 Pragma “公开，最大年龄=600”
角度请求需要有 Cache-Control 和带有“无缓存”的编译指示

在我的应用程序中（.net core + angular）

app.js

var cacheConfig = function ($httpProvider) {

$httpProvider.defaults.headers.common["Cache-Control"] = "no-cache";
$httpProvider.defaults.cache = false;

if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
}

$httpProvider.defaults.headers.get["If-Modified-Since"] = "0";
};

启动.cs

  app.UseStaticFiles(new StaticFileOptions
            {
                OnPrepareResponse = ctx =>
                {
                    ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=600");
                    ctx.Context.Response.Headers.Append("Pragma", "public,max-age=600");
                    //ctx.Context.Response.Headers.Append("ETag", DateTime.Now.Ticks.ToString());
                }
            });

【讨论】：

【解决方案6】：

要解决 Wildfly 设置，您需要在 untertow 部分更改standalone.xml 文件：

<server name="default-server">
    <host name="default-host" alias="localhost">
        ...
        <filter-ref name="custom-max-age" predicate="path-suffix['.woff'] or path-suffix ['.woff2'] or path-suffix ['.ttf'] or path-suffix ['.svg'] or path-suffix ['.eot'] or path-suffix ['.otf']"/>
    </host>
</server>
<filters>
    <response-header name="custom-max-age" header-name="Cache-Control" header-value="public"/>
</filters>

【讨论】：

【解决方案7】：

为了解决 nginx 设置问题，我将其添加到我们的配置文件中

# Favicon and fonts
location ~* \.(ico|woff|ttf|svg|eot|otf)$ {
        expires 1w;
        access_log off;
        add_header Cache-Control "public";
}

【讨论】：

【解决方案8】：

对于那些可能遇到类似问题的人来说，Internet Explorer 中有一个错误会导致 webfonts 在某些缓存控制情况下无法呈现。

如果服务器发送标头 Pragma: no-cache 和/或 Cache-Control no-store，这将导致 IE 无法呈现字形。

这花了我几个小时才找到，所以希望在这里发帖可以帮助其他人节省时间！

【讨论】：

此解决方案有效！不知何故，无缓存标头并不总是有效并导致更多问题。谢谢。
是的，这才是真正的答案，实用的是here

【解决方案9】：

好的，我自己解决了这个问题。

问题是，不知何故，我的 IE 进入了某种安全状态，字体下载被禁用。

所以我更改了“保护模式”的自定义级别 - 您可以在 Internet 选项菜单的“安全”选项卡中找到它。

单击“自定义级别...”按钮后，您必须搜索“字体下载”并将其更改为“启用”。

感谢任何人的帮助！

【讨论】：

很好的发现。在找到您的解决方法之前，我被困了几个小时。如果 IE 实际上在控制台中显示它没有下载 fontawesome 的警告，那就太好了。谢谢。
这对我不起作用，因为图标并未在所有浏览器中显示。它们已正确加载，并且没有显示 404 或任何其他错误。还有其他想法吗？字体下载已启用