webentwicklung-frage-antwort-db.com.de

bootstrap 3.2.0 Glyphicons werden im Internet Explorer nicht angezeigt

Ich benutze Twitter Bootstrap 3.2.0 und verwende einige Glyphicons, die in ff, Chrome und Opera einwandfrei funktionieren, aber im Internet Explorer nicht angezeigt werden. 

Das Seltsame ist, wenn ich die getbootstrap.com-Website öffne und den Abschnitt "Komponenten" anschaue, selbst wenn sie nicht richtig angezeigt werden, bezweifle ich jegliche Implementierungsprobleme auf meiner Seite.

Hat jemand anderes ein ähnliches Problem? Oder weiß man etwas über dieses Verhalten? 

Hier ist ein Bild von meinem Internet Explorer 11

http://we.tl/nsDnTiZqoZ

21
mattFer

Ok, das Problem wurde von mir gelöst. 

Das Problem war, dass mein IE irgendwie in einen bestimmten Sicherheitszustand ging, in dem der Font-Download deaktiviert war.

Also habe ich die Stufe "Benutzerdefiniert" des "geschützten Modus" geändert - Sie finden das auf der Registerkarte "Sicherheit" im Menü "Internetoptionen".

Nachdem Sie auf die Schaltfläche "Stufe anpassen" geklickt haben, müssen Sie nach "Font-Download" suchen und "Aktivieren" auswählen. 

Vielen Dank für Ihre Hilfe!

39
mattFer

Für diejenigen von Ihnen, bei denen möglicherweise ein ähnliches Problem auftritt, gibt es einen Fehler in Internet Explorer, der dazu führt, dass Webfonts unter bestimmten Cache-Steuerungssituationen nicht gerendert werden.

Wenn der Server den Header Pragma: no-cache und/oder Cache-Control no-store sendet, führt dies dazu, dass IE die Glyphen nicht rendert.

Das hat mich Stunden gekostet, um herauszufinden, hoffentlich helfen andere hier, Zeit zu sparen!

29
Tom Mettam

Laden Sie bootstrap.css von CDN anstelle des Ressourcenordners in der Anwendung. Es klappte für mich nach dem Laden von CDN. 

Check-in-Netzwerke-Registerkarte Welche Dateien verwenden den glyphicon-Screenshot oder Symbole, die nicht geladen werden. In meinem Fall wird "glyphicon-screenshot" nicht in IE 11 Browser geladen.

Vor dieser Prüfung sind die Schriftarten aktiviert geben Sie die Bildbeschreibung hier ein Symbole, die nicht geladen werden, zeigen einen Fehler in der Registerkarte F12 des Debug-Tools für die Stile an. Bildbeschreibung hier eingeben

1

Dies ist zu spät, um antworten zu können, aber kürzlich habe ich Probleme mit Angular 4 + grails als Backend gehabt. Für mich waren alle Ressourcen im webapp-Ordner in Grails eingestellt 

Cache-control : 'no-store'. 

und es gibt keinen Header wie geändert seit oder verfällt usw. Dies führte zu dem Problem. Ich habe die Datei application.yml wie folgt aktualisiert, um dieses Problem zu beheben, und es hat für mich funktioniert.

grails:
    resources:
        cachePeriod: 10 

und dies setzt den Antwortheader wie folgt

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

Um ein Wildfly-Setup zu lösen, müssen Sie die Datei standalone.xml im Untertow-Abschnitt ändern:

<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

Um ein Nginx-Setup zu lösen, fügte ich dies unserer Konfigurationsdatei hinzu

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

In unserem Fall verfügen unsere Enterprise Windows 10-Images über eine Einstellung zum Sperren nicht vertrauenswürdiger Schriftarten, die nur IE11 betreffen. Chrome/FF/Edge zeigen alle Schriftarten korrekt an. Beim Zugriff auf meine Website auf meinem persönlichen Computer (nicht auf meinem Firmencomputer) im IE11 wurden die Schriftarten einwandfrei angezeigt.

Siehe diesen Artikel für Details:

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

0
Daryl

Wie ich in diesem Thread erwähne: github

Das Problem ist, dass der Browser (IE 11) Folgendes erhalten muss:

  • statische Inhaltsdateien müssen über Cache-Control und Pragma mit "public, max-age = 600" verfügen. 
  • eckige Anforderungen müssen Cache-Control und Pragma mit "no-cache" haben

In meiner App (.net Core + eckig)

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