IE8 CSS @font-face seulement les polices de travail :avant de contenu sur plus et parfois à l'actualisation/rafraîchissement

Question

Mise à JOUR: j'ai écrit un post de blog sur ce que j'ai appris au sujet de cette question. Je n'ai toujours pas bien le comprendre, mais j'espère que quelqu'un va lire ce et de jeter un peu de lumière sur mon problème: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8

J'ai une page où je suis de l'utilisation de @font-face pour importer une police personnalisée pour les icônes. Les icônes sont créés avec une classe:

.icon {font-family: 'icon-font';}
.icon:before {content: 'A';}

Et voila, j'ai ce que l'icône est utilisée pour "Une". Les choses assez standard, fonctionne dans tous les navigateurs, y compris IE8.

Cependant, dans IE8, j'ai un bug bizarre. Lorsque le chargement de la page, la police n'est pas de travail. Au lieu d'icônes, j'ai des lettres dans tous les sens. Une fois que j'ai passez la souris SUR la page (body), la moitié des lettres deviennent des icônes. Le reste devenues des icônes quand je passe.

De SORTE que la police face d'inscrire correctement. La police de caractères de la famille et propriétés de contenu sont à la fois le travail, mais quelque chose d'autre est à l'origine de la les icônes à charge seulement après le vol stationnaire.

Donc, il y a une sorte de bug avec @font-face dans IE8 lorsque vous essayez d'utiliser la police de caractères avec :before{content: 'a'}, mais je n'ai aucune idée de ce que le bug est.

J'ai cherché pendant des heures sur ici pour un bug similaire/IE8 question/quoi que ce soit, mais j'ai pas eu de chance et je suis sur le point de devenir fou. TOUTES les suggestions?

Laissez-moi savoir si je peux donner plus d'info qui pourrait être utile.

EDIT: mis à Jour le lien brisé le blog.

Answer 1

J'ai eu le même bug.

Je l'ai fixée par l'exécution de 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 vous permet de IE8 redessiner tous :before et :after pseudo-éléments

Answer 2

J'ai récemment rencontré ce en tant que bien, et il fixe en incluant le @font-face deux fois dans mon fichier CSS. Le premier @font-face est utilisée par l'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-20

Answer 3

J'ai essayé exactement le même problème. Dans IE8 le webfont icône (à l'aide de pseudo-éléments) rend parfois la police de secours, mais lorsque vous passez la webfont icône vient visibles.

Les icônes ont été mis en œuvre à l'aide de :after et :before avec IE7 soutien, comme ceci.

Dans mon cas, le projet est développé en HTML5 et en utilisant htmlshiv pour soutenir les nouvelles balises HTML5 dans les navigateurs plus anciens.

Le problème était ridiculement résolu en plaçant le html5shiv balise de script ci-dessous les principaux CSS:

<link rel="stylesheet" href="http://stackoverflow.com/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!

Answer 4

J'ai eu un problème similaire où la police ne serait pas apparaître jusqu'à ce que je survole l'élément parent. J'ai été en mesure de résoudre ce problème par le déclenchement d'une manifestation thématique sur les éléments parent.

de l'élément.parent().trigger('focus');

Espérons que cela aide quelqu'un!

Answer 5

Solution de contournement:

Trouver la feuille de style et de le recharger sur le document prêt si IE8:

Exemple de code HTML:

<!DOCTYPE html>
<html>
<head>
<!-- … -->
<link id="base-css" rel="stylesheet" href="http://stackoverflow.com/styles.base.css" type="text/css" />
<!-- … -->
</head>
<!-- … -->
</html>

Exemple De Code 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;
    });
}