IE8 CSS @ font-face шрифты работают только для: перед тем, как контент перезагружается, а иногда - при обновлении / усиленном обновлении

Question

ОБНОВЛЕНИЕ: я написал сообщение в блоге о том, что я узнал об этой проблеме.Я до сих пор не до конца понимаю, но, надеюсь, кто-то прочтет это и прояснит мою проблему: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8

У меня есть страница, где я использую @ font-face для импорта нестандартного шрифтадля икон.Иконки создаются с помощью класса:

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

И вуаля, у меня есть любой значок, используемый для «А».Довольно стандартный материал, работает во всех браузерах, включая IE8.

Однако в IE8 у меня странная ошибка.Когда страница загружается, шрифт не работает.Вместо значков у меня повсюду буквы.Как только я наведу курсор мыши на страницу (тело), ​​половина букв станет иконкой.Остальные становятся иконами, когда я нахожу их над собой.

ТАК что font-face вставляется правильно.Свойства font-family и content оба работают, но что-то еще заставляет иконки загружаться только после наведения.

Так что есть некоторая ошибка с @ font-face в IE8, когда вы пытаетесь использовать шрифтwith: before {content: 'a'}, но я понятия не имею, что это за ошибка.

Я часами искал похожую ошибку / проблему IE8 / что-нибудь, но у меня не былоудачи и я схожу с ума.Какие-либо предложения?

Дайте мне знать, могу ли я предоставить больше информации, которая может быть полезна.

РЕДАКТИРОВАТЬ: Обновлена ​​неработающая ссылка на сообщение в блоге.

Answer 1

У меня была та же ошибка.

Я исправил ее, выполнив этот скрипт на domready (конечно, только для IE8):

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);

Это позволяет IE8 перерисовывать все :before и:after псевдоэлементы

Answer 2

Недавно я тоже столкнулся с этим и исправил это, дважды включив @ font-face в мой файл CSS. Первый @ font-face используется IE, а второй - другими браузерами.

@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;
}

Источник: http://www.boonex.com/n/ie8-icon-font-fix-and-unused-language-keys-2012-08-20

Answer 3

Я экспериментировал с точно такой же проблемой.В IE8 значок веб-шрифта (с использованием псевдоэлементов) иногда отображает резервный шрифт, но при наведении на него значок веб-шрифта становится видимым.

Значки были реализованы с использованием: after и: before с поддержкой IE7, вот так .

В моем случае проект разработан на HTML5 и использует htmlshiv для поддержки новых тегов HTML5 в старых браузерах.

Проблема заключалась в том, чтонелепо решил поместить тег html5shiv script ниже основного CSS:

<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]-->

Я счастлив сейчас :) Надеюсь, это поможет!

Answer 4

У меня была похожая проблема, когда шрифт не показывался, пока я не завис над родительским элементом Я смог решить эту проблему, вызвав событие focus на элементе parent.

element.parent () триггер ( 'фокус').

Надеюсь, это кому-нибудь поможет!

Answer 5

Приведенные выше решения не решили проблему для меня при обновлении IE8. Также я обнаружил некоторые проблемы, когда добавление таблицы стилей нарушило бы размер фона IE8 и исправило фоныizeize.min.htc

Итак, вот что я сделал:

Добавление класса ie8 к тегу html:

<!--[if IE 8 ]><html class="ie8"><![endif]-->

Добавить класс загрузки к телу:

<body class='loading'>

Переопределить атрибут содержимого CSS только для IE8:

<style>
.ie8 .loading .icon:before {
    content: '' !important;
}
</style>

Теперь удалите класс загрузки в DOM ready:

$( function() {
    $('body').removeClass('loading')
} );

Теперь это работает!

Answer 6

Обходной путь:

Найти таблицу стилей и перезагрузить готовый документ, если IE8:

Пример HTML:

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

Пример 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;
    });
}

Answer 7

Исходя из ответа @ausi, вы можете изменить его с помощью jQuery и CoffeeScript до 4 строк:

$(document).ready ->
  $style = $('<style type="text/css">:before,:after{content:none !important}</style>')
  $('head').append $style
  setTimeout (-> $style.remove()), 0

или с помощью синтаксиса 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);
});

Answer 8

Для меня проблема была просто решена с помощью объявления !important в атрибуте содержимого.

Т.е.:

.icon:before {
   content: "\f108" !important;
}

Answer 9

У меня был похожий глюк в Chrome. Вот мое исправление:

setTimeout(function(){
    jQuery('head').append('<style id="fontfix">*:before,*:after{}</style>');
    },100);

Я предполагаю, что стиль псевдо-CSS был отрисован до того, как веб-шрифт был готов, что привело к пустым символам. После загрузки страницы, зависание или изменение css каким-либо образом вызывало их магическое появление. Так что мое исправление просто вызывает обновление CSS, которое ничего не делает.

Answer 10

Хорошо, вот вариант решения @ ausi, которое я использовал, и которое сработало для меня.Это решение взято из комментария Адама в нижней части этой статьи http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/

Я подумал, что изложу его здесь более подробно, чтобы другие могли его использовать быстрее.

Установить дополнительный класс, например.ie-loading-fix для тега html для IE8.Включите все ваши CSS, а затем получите условный файл JS для IE8.Например:

<!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>
  ...

Затем в верхней части вашего основного CSS-файла добавьте что-то вроде:

.ie-loading-fix :before,
.ie-loading-fix :after {
  content: none !important;
}

Затем в ваш файл IE8 js/ie.js включите следующее:

window.onload = function () {
  var cname = document.documentElement.className;
  cname = cname.replace('ie-loading-fix', '');
  document.documentElement.className = cname;
}

Этот JS удалит стиль ie-loading-fix, скрывающий все содержимое :before и :after, и заставит IE8 перерисовать все содержимое :before и :after после загрузки страницы.

Это решение устранило проблему, возникшую у меня с Font Awesome v4.4, которая часто переключала IE8 в режим совместимости или вылетала, даже если я явно настраивал страницу для загрузки в режиме Edge с помощью метатега.