ОБНОВЛЕНИЕ: я написал сообщение в блоге о том, что я узнал об этой проблеме. Я все еще не совсем понимаю это, но, надеюсь, кто-то прочитает это и пролил свет на мою проблему: 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 у меня есть странная ошибка. Когда страница загружается, шрифт не работает. Вместо значков у меня есть письма повсюду. Как только я навису над страницей (телом), половина букв станет значком. Остальные становятся значками, когда я навис над ними.
SO font-face правильно встраивается. Свойства семейства шрифтов и содержимого также работают, но что-то еще вызывает загрузку значков только после наведения.
Итак, есть какая-то ошибка с @font-face в IE8, когда вы пытаетесь использовать шрифт с: before {content: 'a'}, но я понятия не имею, что это за ошибка.
Я искал часы здесь для аналогичной проблемы/проблемы IE8/ничего, но мне не повезло, и я собираюсь сходить с ума. Какие-либо предложения?
Сообщите мне, могу ли я предоставить больше информации, которая может быть полезна.
EDIT: обновлена неработающая ссылка на сообщение в блоге.
У меня была такая же ошибка.
Я исправил его, выполнив этот script на 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
Недавно я столкнулся с этим и исправил его, дважды включив @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
Я экспериментировал точно с той же проблемой. В IE8 значок webfont (с использованием псевдоэлементов) иногда отображает резервный шрифт, но когда вы его наводите, появляется значок webfont.
Значки были реализованы с использованием: 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]-->
Я счастлив сейчас:) Надеюсь, это поможет!
У меня была аналогичная проблема, где шрифт не появлялся до тех пор, пока я не переместился над родительским элементом. Я смог исправить эту проблему, вызвав событие фокусировки на родителях элементов.
element.parent() триггер ( 'фокус').
Надеюсь, это поможет кому-то!
Обход проблемы:
Найти таблицу стилей и перезагрузить готовый документ, если 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;
});
}
Вышеупомянутые решения не исправили проблему для меня, когда IE8 обновлен. Также я нашел некоторые проблемы, когда добавление таблицы стилей нарушило бы исправление размера фона IE8 backgroundsize.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')
} );
Теперь он работает!
Основываясь на ответе от @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);
});
У меня был аналогичный глюк в Chrome. Вот мое исправление:
setTimeout(function(){
jQuery('head').append('<style id="fontfix">*:before,*:after{}</style>');
},100);
Моя догадка заключается в том, что стиль pseudo css был визуализирован до того, как webfont был готов, что привело к пустым глифам. После загрузки страницы, зависание или изменение css каким-либо образом вызвало их волшебно. Поэтому мое исправление просто заставляет обновление css ничего не делать.
Для меня проблема была просто решена с помощью объявления !important в атрибуте content.
то есть:.
.icon:before {
content: "\f108" !important;
}
Хорошо, поэтому я пытался исправить эту проблему некоторое время. Как ни странно, демо-версия icomoon продолжала работать в IE8, но моя никогда не делала этого, хотя я чувствовал, что у меня есть почти то же самое на месте. Поэтому я начал все кивать (демо-версия icomoon, а также моя собственная реализация) и то, что я нашел две вещи, которые должны были быть там, чтобы это работало.
Во-первых, я обнаружил, что мне нужно сохранить кеш-память в имени файла.
Итак, в моей реализации у меня было:
@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;
}
Но мне нужно было:
@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;
}
Во-вторых, и это не имеет смысла, это то, что мне нужно что-то в таблице стилей с псевдоселектором :hover. Неважно, что это такое или какие правила для него, ему просто нужно что-то, а затем появятся значки, когда я навис над ними.
Итак, я просто вставил [data-icon]:hover{} в мою таблицу стилей CSS (просто так, без каких-либо правил).
Хотел бы я объяснить вам, почему это работает, но я не понимаю. Мое лучшее предположение заключается в том, что это вызывает некоторое обновление в IE8 и вызывает появление значков.
Моя проблема с IE8 была решена путем удаления двойной двоеточия в селекторе псевдоэлементов.
Не показывает значок в IE8...
.icon::before {
content: "\76";
}
Имеет значок в IE8...
.icon:before {
content: "\76";
}
Итак, вот вариант решения @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 с помощью метатега.
Если я не ошибаюсь, IE не читает шрифт TTF, для этого требуются шрифты EOT
Я провел некоторое исследование в соответствии с @vieron answer, и выясняется, что другой способ исправить эту проблему состоит в том, чтобы заблокировать отображение страницы за несколько миллисекунд, чтобы шрифт мог быть загружен до содержимого. Хотя блокирование отображения страниц - это не самый умный способ решить эту проблему, потому что вы не можете знать, сколько мс вы должны блокировать.
Я доказал это, поставив php файл в качестве исходного файла для javascript.
<!--[if lt IE 9]>
<script src="/block.php"></script>
<![endif]-->
block.php
<?php
usleep(200000);
?>
Если у вас есть внешние библиотеки javascript, такие как HTML5shiv, это происходит автоматически, за исключением того, что вы запускаете сайт в локальной сети (интрасети или localhost) с очень низкой задержкой и без скриптов перед контентом.
Это объясняет тот факт, что проблема не более распространена и замечена.
Я действительно старался найти элегантное решение, но я не могу найти что-то, что исключает javascript или блокирование отображения страницы для IE.
Это исправление, мы столкнулись с этой проблемой с IE7, IE8 и IE9 при использовании ajax
setInterval(function(){
var $ss = $('#base-css');
$ss[0].href = $ss[0].href;
},300);