Bootstrap 3.2.0 glyphicons не отображаются в Internet Explorer

Я использую twitter bootstrap 3.2.0, и я использую некоторые глификоны, которые они работают правильно в ff, chrome и opera, но они не отображаются в Internet Explorer.

Странно, если я открою сайт getbootstrap.com и посмотрю раздел "Компоненты", даже там они отображаются неправильно, поэтому я сомневаюсь в каких-либо проблемах реализации на моей стороне.

Есть ли у кого-то еще подобная проблема? Или что-то знает об этом поведении?

Вот скриншот о том, как он выглядит в моем Internet Explorer 11

http://we.tl/nsDnTiZqoZ

Ответы

Ответ 1

Хорошо, решил проблему самостоятельно.

Проблема заключалась в том, что каким-то образом мой IE перешел в определенное состояние безопасности, в котором загрузка шрифта была отключена.

Итак, я изменил пользовательский уровень "защищенного режима" - вы можете найти это на вкладке "Безопасность" в меню "Свойства обозревателя".

После того, как вы нажмете кнопку "Пользовательский уровень...", вам нужно искать "загрузку шрифтов" и изменить ее на "включить".

Спасибо за вашу помощь!

Ответ 2

Для тех из вас, кто может столкнуться с подобной проблемой, в Internet Explorer есть ошибка, из-за которой webfonts не отображается в определенных ситуациях управления кешем.

Если сервер отправляет заголовок Pragma: no-cache и/или Cache-Control no-store, это приведет к тому, что IE не сможет отобразить глифы.

Мне потребовалось несколько часов, чтобы отслеживать, поэтому, надеюсь, публикация здесь поможет другим сэкономить время!

Ответ 3

Чтобы решить установку nginx, я добавил это в наш файл конфигурации

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

Ответ 4

Чтобы решить настройку 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>

Ответ 5

Как я упоминаю в этой теме: github

Проблема в том, что браузер (IE 11) должен получить:

  • Файлы статического содержимого должны иметь Cache-Control и Pragma с "public, max-age = 600"
  • angular запросы должны иметь Cache-Control и 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());
                }
            });