2
Основная идея this transition увеличивает размер шрифта, удивительный значок и текст при наведении мыши.Перемещение CSS (псевдоэлемент, размер шрифта, em, IE) не работает
Он отлично работает в Chrome, Opera, Safari и Firefox, но он не работает с IE 11.
пример показывает тот же переход с помощью точек (класс test1) и эм (класс test2); У меня нет проблем с использованием px; проблема специфична для следующего сценария:
Эффект: переход
Тип: псевдо-элемент
недвижимости: размер шрифта
Unit: эм
Браузер: IE 11
.test1 span{
font-size: 40px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test1::before{
font-family: FontAwesome;
font-size: 20px;
content: "\f08e";
position: relative;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test1:hover span{
font-size: 80px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test1:hover::before{
font-size: 40px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test2 span{
font-size: 1em;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test2::before{
font-family: FontAwesome;
font-size: 0.5em;
content: "\f08e";
position: relative;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test2:hover span{
font-size: 2em;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.test2:hover::before{
font-size: 1em;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}<html>
<head>
<link rel="stylesheet" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
</head>
<body>
<table>
<tr style="font-size: 40px;">
<td class="test1">
<span>Text 01</span>
</td>
</tr>
<tr style="font-size: 40px;">
<td class="test2">
<span>Text 01</span>
</td>
</tr>
</table>
</body>
</html>Я пропускаю что-то здесь? Есть ли известная проблема в IE?
Наиболее похожей проблемой, которую я смог найти, является this one, в которой упоминается известная проблема в IE, но это кажется другой проблемой.