Интересное поведение em для font-size в Internet Explorer 9+

наверх

Добрый день, уважаемые читатели!

Сегодня я хочу рассказать вам об одной интересной особенности поведения em значений для font-size в IE9+.

Недавно я правил баг на одном из сайтов, связанный с тем, что размер шрифта у псевдоэлемента :before был в IE9+ в два раза больше, чем в остальных браузерах.

После долгого поиска я все-таки обнаружил проблему!

HTML

<div class="text-block important-block">
    Some interesting text for test.
</div>

Ничего особенного. Просто текст.

CSS

div:before {
    content: 'IE9-10';
    display: block;
    position: relative;
    font-size: 1.5em;
}
.text-block:before {    
    font-size: 2em;
}
.important-block:before {
    font-size: 3em;
}

Как вы думаете, какой размер текста будет в Chrome, Opera? В данном случае размер шрифта будет 3em.

Но это совсем не так для IE! В IE размер шрифта будет 9em!

Почему 9? Вот в этом и заключается особенность расчета размера шрифтов. Если в IE9+ для одного и того же псевдоэлемента задать размер шрифта через разные селекторы, то он просто перемножит все размеры шрифтов.

В нашем случае получилось, что font-size = 1.5 * 2 * 3 = 9em;

Перемножение будет даже в таком случае:

.text-block:before {
    font-size: 2em;
}
.text-block:before { // дублирование верхнего селектора
    font-size: 3em; // в IE9+ размер будет 2 * 3 = 6em; 
}

Вот такая интересная особенность! Тоже самое будет для псевдоэлемента :after.

Поиграться со значениями шрифтов можно здесь: http://jsfiddle.net/p20gm8cm/12/

На этом все. Спасибо за внимание!

Подписывайтесь на рассылку! 😉