twitter-bootstrap - iconos - glyphicon cdn
Los glyphicons bootstrap 3.2.0 no se muestran en Internet Explorer (8)
Estoy usando Twitter Bootstrap 3.2.0 y uso algunos glifos que funcionan correctamente en FF, Chrome y Opera, pero no se muestran en Internet Explorer.
Lo extraño es que si abro el sitio web getbootstrap.com y miro la sección "Componentes", incluso allí no se muestran correctamente, por lo que dudo de los problemas de implementación por mi parte.
¿Alguien más tiene un problema similar? ¿O es saber algo sobre este comportamiento?
Aquí hay un Scrennshot de cómo se ve en mi Internet Explorer 11
Cargue bootstrap.css desde CDN en lugar de la carpeta de recursos en la aplicación. Funcionó para mí después de cargar desde CDN.
Pestaña de redes de check-in cuáles son los archivos que están usando la captura de pantalla de glyphicon o los iconos que no se cargan. en mi caso, es " glyphicon-screenshot " que no se carga en el navegador IE 11.
Antes de esa comprobación, las fuentes están habilitadas, ingrese aquí la descripción de la imagen y los iconos que no están cargados mostrarán un error en la herramienta de depuración de la pestaña de estilos f12. introduzca la descripción de la imagen aquí
Como menciono en este hilo: github
El problema es que el navegador (IE 11) necesita recibir:
- los archivos de contenido estático deben tener Cache-Control y Pragma con "public, max-age = 600"
- las solicitudes angulares deben tener Cache-Control y Pragma con "no-cache"
En mi aplicación (.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());
}
});
En nuestro caso, nuestras imágenes de Windows 10 para empresas tienen una configuración para bloquear las fuentes que no son de confianza y que solo afectan a IE11. Chrome / FF / Edge todos muestran las fuentes correctamente. El acceso a nuestro sitio en mi máquina personal (no en la máquina de mi empresa) en IE11 mostró que las fuentes estaban perfectamente bien.
Vea este artículo para más detalles:
Esto es demasiado tarde para responder, pero recientemente enfrenté un problema con Angular 4 + grails como backend. Para mí todos los recursos en la carpeta webapp en grails fueron configurando el
Cache-control : ''no-store''.
y no hay un encabezado como modificado, ya que caduca, etc. Esto causó el problema. Actualicé el archivo application.yml como a continuación para solucionar este problema, y funcionó para mí.
grails:
resources:
cachePeriod: 10
y esto establecerá el encabezado de respuesta como abajo
Cache-Control : max-age=10
Ok, resuelto el problema por mi cuenta.
El problema era que, de alguna manera, mi IE tenía un cierto estado de seguridad, en el que la descarga de fuentes estaba deshabilitada.
Así que cambié el nivel personalizado del "Modo protegido", puede encontrarlo en la pestaña de Seguridad del menú de Opciones de Internet.
Después de hacer clic en el botón "Nivel personalizado ...", debe buscar "Descarga de fuentes" y cambiarlo a "habilitar".
Gracias por su ayuda a nadie!
Para aquellos de ustedes que puedan estar experimentando un problema similar, hay un error en Internet Explorer que hace que las fuentes web no se procesen en ciertas situaciones de control de caché.
Si el servidor está enviando el encabezado Pragma: no-cache y / o Cache-Control no-store , esto hará que IE no genere los glifos.
Esto me tomó horas para localizarlo, así que espero que publicar aquí ayude a otros a ahorrar tiempo.
Para resolver en una configuración nginx agregué esto a nuestro archivo de configuración
# Favicon and fonts
location ~* /.(ico|woff|ttf|svg|eot|otf)$ {
expires 1w;
access_log off;
add_header Cache-Control "public";
}
Para resolver una configuración de Wildfly, debe cambiar su archivo standalone.xml en la sección siguiente:
<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>