IE8 CSS @ font-face fonts only working for: before content on over et parfois on refresh / hard refresh
MISE À JOUR: J'ai écrit un article de blog sur ce que j'ai appris sur ce problème. Je ne le comprends toujours pas complètement, mais j'espère que quelqu'un lira ceci et éclaircira mon problème: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and -ie8
J'ai une page où j'utilise @ font-face pour importer une police personnalisée pour les icônes. Les icônes sont créées avec une classe:
.icon {font-family: 'icon-font';}
.icon:before {content: 'A';}
Et le tour est joué, j'ai n'importe quelle icône utilisée pour "A". Assez standard, fonctionne dans tous les navigateurs, y compris IE8.
Cependant, dans IE8, j'ai un bug bizarre. Lorsque la page se charge, la police ne fonctionne pas. Au lieu d'icônes, j'ai des lettres partout. Une fois que j'ai survolé la page (corps), la moitié des lettres deviennent des icônes. Les autres deviennent des icônes lorsque je les survole.
SO la police-face s'incorpore correctement. La famille de polices et les propriétés de contenu fonctionnent toutes les deux, mais quelque chose d'autre provoque le chargement des icônes uniquement après le survol.
Il y a donc une sorte de bogue avec @ font-face dans IE8 lorsque vous essayez d'utiliser la police avec: before {content: 'a'} mais je n'ai aucune idée de ce qu'est le bogue.
J'ai cherché pendant des heures ici pour un problème de bug/IE8 similaire/quoi que ce soit, mais je n'ai pas eu de chance et je suis sur le point de devenir fou. Aucune suggestion?
Faites-moi savoir si je peux fournir plus d'informations qui pourraient être utiles.
EDIT: mise à jour du lien brisé vers le blog.
J'ai eu le même bug.
Je l'ai corrigé en exécutant ce script sur domready (uniquement pour IE8 bien sûr):
var head = document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
style.styleSheet.cssText = ':before,:after{content:none !important';
head.appendChild(style);
setTimeout(function(){
head.removeChild(style);
}, 0);
Cela permet à IE8 de redessiner tout :before et :after pseudo-éléments
J'ai récemment rencontré cela aussi et l'ai corrigé en incluant deux fois la police @ face dans mon fichier CSS. Le premier @ font-face est utilisé par IE et le second est utilisé par d'autres navigateurs.
@font-face {
font-family: "SocialFoundicons";
src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "SocialFoundicons";
src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot"),
url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot?#iefix") format("embedded-opentype"),
url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.woff") format("woff"),
url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.ttf") format("truetype"),
url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.svg#SocialFoundicons") format("svg");
font-weight: normal;
font-style: normal;
}
Source: http://www.boonex.com/n/ie8-icon-font-fix-and-unused-language-keys-2012-08-2
J'expérimentais exactement le même problème. Dans IE8, l'icône de police Web (à l'aide de pseudo-éléments) affiche parfois la police de secours, mais lorsque vous la survolez, l'icône de police Web apparaît.
Les icônes ont été implémentées en utilisant: après et: avant avec le support IE7, comme ceci .
Dans mon cas, le projet est développé en HTML5 et utilise htmlshiv pour prendre en charge les nouvelles balises HTML5 dans les anciens navigateurs.
Le problème a été ridiculement résolu en plaçant la balise de script html5shiv sous le CSS principal:
<link rel="stylesheet" href="/stylesheets/main.css" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Je suis heureux maintenant :) J'espère que ça aide!
J'avais un problème similaire où la police n'apparaissait pas jusqu'à ce que je survole l'élément parent. J'ai pu résoudre ce problème en déclenchant un événement focus sur le parent des éléments.
element.parent (). trigger ('focus');
J'espère que cela aide quelqu'un!
Solution:
Trouvez la feuille de style et rechargez sur le document prêt si IE8:
Exemple HTML:
<!DOCTYPE html>
<html>
<head>
<!-- … -->
<link id="base-css" rel="stylesheet" href="/styles.base.css" type="text/css" />
<!-- … -->
</head>
<!-- … -->
</html>
Exemple de JavaScript:
// Reload stylesheet on document ready if IE8
if ($.browser.msie && 8 == parseInt($.browser.version)) {
$(function() {
var $ss = $('#base-css');
$ss[0].href = $ss[0].href;
});
}
Les solutions ci-dessus n'ont pas résolu le problème pour moi lorsque IE8 est actualisé. J'ai également rencontré des problèmes où l'ajout d'une feuille de style rompait la correction de la taille d'arrière-plan IE8 backgroundsize.min.htc
Voici donc ce que j'ai fait:
Ajoutez la classe ie8 à la balise html:
<!--[if IE 8 ]><html class="ie8"><![endif]-->
Ajoutez une classe de chargement au corps:
<body class='loading'>
Remplacez l'attribut de contenu CSS uniquement pour IE8:
<style>
.ie8 .loading .icon:before {
content: '' !important;
}
</style>
Maintenant, supprimez la classe de chargement sur DOM prêt:
$( function() {
$('body').removeClass('loading')
} );
Maintenant ça marche!
Sur la base de la réponse de @ausi, vous pouvez refactoriser cela avec jQuery et CoffeeScript sur 4 lignes:
$(document).ready ->
$style = $('<style type="text/css">:before,:after{content:none !important}</style>')
$('head').append $style
setTimeout (-> $style.remove()), 0
ou avec la syntaxe JavaScript:
$(document).ready(function() {
var $style;
$style = $('<style type="text/css">:before,:after{content:none !important}</style>');
$('head').append($style);
return setTimeout((function() {
return $style.remove();
}), 0);
});
Pour moi, le problème a été simplement résolu en utilisant la déclaration !important sur l'attribut content.
C'est à dire.:
.icon:before {
content: "\f108" !important;
}
J'ai eu un problème similaire dans Chrome. Voici ma solution:
setTimeout(function(){
jQuery('head').append('<style id="fontfix">*:before,*:after{}</style>');
},100);
Je suppose que le style pseudo css a été rendu avant que la police Web ne soit prête, ce qui a entraîné des glyphes vides. Après le chargement de la page, le survol ou la modification du CSS de quelque manière que ce soit les a fait apparaître comme par magie. Donc, mon correctif force simplement une mise à jour CSS qui ne fait rien.
Mon problème IE8 a été résolu en supprimant les deux-points dans le sélecteur de pseudo-élément.
Non affiche une icône dans IE8 ...
.icon::before {
content: "\76";
}
Affiche affiche une icône dans IE8 ...
.icon:before {
content: "\76";
}
Ok, voici une variante de la solution de @ ausi que j'ai utilisée et qui a fonctionné pour moi. Cette solution provient du commentaire d'Adam au bas de cet article http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/
Je pensais que je le mettrais ici plus en détail pour le rendre plus rapide pour les autres.
Définissez une classe supplémentaire, par exemple. ie-loading-fix sur la balise html pour IE8. Incluez tous vos CSS et ensuite, ayez un fichier JS conditionnel pour IE8. Par exemple:
<!DOCTYPE html>
<!--[if IE 8]> <html class="ie-loading-fix"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- Include all your CSS before JS -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--[if lt IE 9]>
<script src="js/ie.js"></script>
<![endif]-->
</head>
...
Ensuite, en haut de votre fichier CSS principal, ajoutez quelque chose comme:
.ie-loading-fix :before,
.ie-loading-fix :after {
content: none !important;
}
Puis dans votre IE8 js/ie.js le fichier comprend les éléments suivants:
window.onload = function () {
var cname = document.documentElement.className;
cname = cname.replace('ie-loading-fix', '');
document.documentElement.className = cname;
}
Ce JS supprimera le ie-loading-fix style qui cache tout :before et :after contenu et forcera IE8 à tout redessiner :before et :after contenu une fois la page chargée.
Cette solution a résolu un problème que je rencontrais avec Font Awesome v4.4 qui basculait fréquemment IE8 en affichage de compatibilité ou plantait même si je définissais explicitement la page à charger en mode Edge à l'aide de la balise META.
D'accord, j'ai donc essayé de résoudre ce problème depuis un certain temps. Curieusement, la démo icomoon a continué à fonctionner dans IE8, mais la mienne ne l'a jamais fait, même si j'avais l'impression d'avoir à peu près la même chose en place. J'ai donc commencé à tout résumer (la démo icomoon ainsi que ma propre implémentation) et ce que j'ai trouvé deux choses qui devaient être là pour que cela fonctionne.
Tout d'abord, j'ai trouvé que je devais garder le cachebuster sur le nom de fichier.
Donc, dans ma mise en œuvre, j'avais:
@font-face {
font-family: 'iconFont';
src:url('icon_font.eot');
src:url('icon_font.eot') format('embedded-opentype'),
url('icon_font.woff') format('woff'),
url('icon_font.ttf') format('truetype'),
url('icon_font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Mais ce dont j'avais besoin, c'était:
@font-face {
font-family: 'iconFont';
src:url('icon_font.eot?-v9zs5u');
src:url('icon_font.eot?#iefix-v9zs5u') format('embedded-opentype'),
url('icon_font.woff?-v9zs5u') format('woff'),
url('icon_font.ttf?-v9zs5u') format('truetype'),
url('icon_font.svg?-v9zs5u#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Deuxièmement, et celui-ci n'a pas de sens, c'est que j'avais besoin de quelque chose dans la feuille de style qui avait un :hover pseudo sélecteur. Peu importe de quoi il s'agit ou quelles sont les règles, il fallait juste quelque chose et ensuite les icônes apparaissaient lorsque je les survolais.
J'ai donc simplement inséré [data-icon]:hover{} dans ma feuille de style CSS (comme ça, sans aucune règle).
J'aimerais pouvoir vous expliquer pourquoi cela fonctionne, mais je ne comprends pas. Ma meilleure supposition est que cela déclenche une sorte de rafraîchissement dans IE8 et fait apparaître les icônes.