web-dev-qa-db-fra.com

les glyphiques bootstrap 3.2.0 ne s'affichent pas dans Internet Explorer.

J'utilise Twitter bootstrap 3.2.0 et j'utilise certains glyphicons. Ils fonctionnent correctement en ff, chrome et opera, mais ils ne sont pas affichés dans Internet Explorer. 

La chose étrange est que, si j'ouvre le site Web getbootstrap.com et que je regarde la section "Composants", même s'ils ne sont pas affichés correctement, je doute des problèmes de mise en œuvre de mon côté.

Quelqu'un d'autre a-t-il un problème similaire? Ou est-ce que connaître quelque chose de ce comportement? 

Voici un aperçu de son apparence dans Internet Explorer 11

http://we.tl/nsDnTiZqoZ

twitter-bootstrapinternet-explorerglyphicons
21
mattFer

Ok, résolu le problème par moi-même. 

Le problème était que mon IE était dans un certain état de sécurité, dans lequel le téléchargement des polices était désactivé.

J'ai donc changé le niveau de personnalisation du "Mode protégé" - vous pouvez le trouver dans l'onglet Sécurité du menu Options Internet.

Après avoir cliqué sur le bouton "Personnaliser le niveau ...", vous devez rechercher "Téléchargement de police" et le modifier en "Activer". 

Merci à tous pour votre aide!

39
mattFer

Pour ceux d'entre vous qui rencontrent peut-être un problème similaire, il existe un bogue dans Internet Explorer qui empêche les contrôleurs web de s'afficher dans certaines situations de contrôle du cache.

Si le serveur envoie l'en-tête Pragma: no-cache et/ou Cache-Control no-store , cela empêchera IE de rendre les glyphes.

Cela m'a pris des heures, alors j'espère que poster ici aidera les autres à gagner du temps!

29
Tom Mettam

Chargez le fichier bootstrap.css à partir du CDN au lieu du dossier de ressources de l'application. Cela a fonctionné pour moi après le chargement de CDN. 

Enregistrement dans les réseaux, quels sont les fichiers qui utilisent glyphicon-screenshot ou les icônes qui ne se chargent pas. dans mon cas, "glyphicon-screenshot" n'est pas chargé dans le navigateur IE 11.

Avant cette vérification, les polices sont activées entrez la description de l'image ici Et les icônes non chargées afficheront une erreur dans l'outil de débogage de l'onglet f12 de styles. entrez la description de l'image ici

1
Jagadeeswara Rao

C’est trop tard pour répondre, mais j’ai récemment fait face à un problème avec Angular 4 + grails en back-end Pour moi, toutes les ressources du dossier webapp dans Grails étaient en train de 

Cache-control : 'no-store'.

et il n'y a pas d'en-tête comme modifié depuis, ou expire, etc. Cela était à l'origine du problème. J'ai mis à jour le fichier application.yml comme ci-dessous pour résoudre ce problème et cela a fonctionné pour moi.

grails:
    resources:
        cachePeriod: 10

et cela mettra en-tête de réponse comme ci-dessous

Cache-Control   : max-age=10
1
Rajeesh K

Pour résoudre une configuration de wildfly, vous devez modifier votre fichier standalone.xml dans la section 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>
0
dblum

Pour résoudre une configuration nginx, j'ai ajouté ceci à notre fichier de configuration.

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

Dans notre cas, nos images Windows 10 d’entreprise ont un paramètre permettant de bloquer les polices non fiables qui n’affectent que IE11. Chrome/FF/Edge affichent tous les polices correctement. Accéder à notre site sur ma machine personnelle (et non la machine de ma société) dans IE11 a montré que les polices étaient parfaitement correctes.

Voir cet article pour plus de détails:

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

0
Daryl

Comme je le mentionne dans ce sujet: github

Le problème est que, le navigateur (IE 11) doit recevoir:

  • les fichiers de contenu statique doivent avoir Cache-Control et Pragma avec "public, max-age = 600" 
  • les requêtes angulaires doivent avoir Cache-Control et Pragma avec "no-cache"

Dans mon application (noyau .net + angulaire)

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());
                }
            });
0
zchpit