logo标签列表

Bootstrap 3.2.0图标在Internet Explorer中无法显示

twitter-bootstrapinternet-explorerglyphicons
21
我正在使用 Twitter Bootstrap 3.2.0 并使用一些 Glyphicons，在 Firefox、Chrome 和 Opera 中它们能正常工作，但在 Internet Explorer 中无法显示。奇怪的是，如果我打开 getbootstrap.com 网站并查看 "Components" 部分，即使那里也无法正确显示它们，因此我怀疑这可能不是我方实现问题。是否有其他人遇到了类似问题？或者对此行为有所了解？以下是我的 Internet Explorer 11 中它的截图链接：http://we.tl/nsDnTiZqoZ。
如果它使用的字体出现404错误，请检查网络选项卡。 - Rahul Patil
没有，没有404错误，一切看起来都很好。 - mattFer
你可能安装了奇怪的字体或IE插件。在检查器中查看IE实际使用的字体。 - cvrebert
我认为这不是插件问题，因为我只是用IE进行测试，所以我没有安装任何插件。在CSS中使用的字体族称为“Glyphicons Halflings”。这应该是正确的字体，不是吗？ - mattFer
9个回答
40

好的，我已经自己解决了问题。

问题在于，我的IE以某种安全状态运行，其中字体下载被禁用了。

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

在点击“自定义级别…”按钮后，您需要搜索“字体下载”并将其更改为“启用”。

感谢大家的帮助！

4
不错的发现。在找到你的解决方法之前，我卡了好几个小时。如果IE可以在控制台中显示未下载fontawesome的警告，那就太好了。谢谢。 - Shane Rowatt
2
这对我不起作用，因为图标在所有浏览器中都没有显示出来。它们被正确加载，并且没有显示404或任何其他错误。还有其他的想法吗？字体下载已启用。 - Marc Roussel
31

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

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

这让我花费了几个小时来追踪，希望在这里发布能够帮助其他人节省时间！

3
这个解决方案有效！不知何故，那个“no-cache”头有时不起作用，反而引起更多问题。谢谢。 - Jeson Martajaya
2
是的，这是正确的答案，实际的答案在这里。 - user1767316
1
这是一个关于Angular 4和Grails后端的问题，虽然现在回答有点晚。在我的情况下，Grails中webapp文件夹中的所有资源都被设置为了...
Cache-control : 'no-store'.

这个问题是因为没有像modified-since、expires等头文件。我更新了application.yml如下，以解决这个问题，并且它对我起作用了。

grails:
    resources:
        cachePeriod: 10

这将设置响应头如下所示。
Cache-Control   : max-age=10
1

如我在这个帖子中提到的：github

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

  • 静态内容文件需要具有缓存控制和Pragma，其中“public，max-age = 600”
  • 角度请求需要具有缓存控制和Pragma，其中“no-cache”

在我的应用程序中（.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";
};

Startup.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());
                }
            });
1
从CDN加载bootstrap.css而不是应用程序中的资源文件夹。在我加载CDN后，它对我有用。
检查网络选项卡中使用glyphicon-screenshot或未加载图标的文件。在我的情况下，IE 11浏览器中无法加载"glyphicon-screenshot"。
在此之前，请检查字体是否已启用。

enter image description here

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

enter image description here

0

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

# Favicon and fonts
location ~* \.(ico|woff|ttf|svg|eot|otf)$ {
        expires 1w;
        access_log off;
        add_header Cache-Control "public";
}
0
0
如果您在一个Java应用程序中遇到了这个问题，解决方法可能是创建一个过滤器（javax.servlet.Filter的子类），防止设置那些头在请求字体文件夹的响应中。对于我们的项目来说，这似乎很有效。确保该过滤器配置为Web.xml文件中的第一个组件之一。更多信息请参见如何删除HTTP响应标头？
0

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

<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接