Мне трудно угадать, почему один элемент имеет разные размеры пикселей в зависимости от загруженного набора правил. Очевидно, у элемента всегда один и тот же размер шрифта 6em , который переводится в высоту 96 пикселей. Но после загрузки некоторых других правил тот же размер шрифта преобразуется в высоту 86 пикселей. Вот два снимка вычисленных стилей:
Размер шрифта при загрузке страницы 
Размер шрифта при полной загрузке страницы 
Как я могу отследить правила, благодаря которым это происходит? С Уважением
1 ответ
EM - это не фиксированная единица измерения, это относительный размер. Происхождение «EM» - это буквально ширина буквы «M» определенного шрифта. В цифровой типографике EM относительно базового размера шрифта. Итак, то, что вы видите, является иллюстрацией «каскадной» природы CSS.
При первоначальной загрузке базовый шрифт устанавливается либо в процентах, либо в фиксированном размере (например, 12 пикселей, 14 пикселей, 100% и т. Д.). Затем, когда загружаются дополнительные стили, размер шрифта вашего #TP_splash_screen будет наследование от изменено на что-то меньшее, поэтому значение 6em теперь меньше.
Рассмотрим этот пример:
body{
font-size: 12px;
}
#TP_splash_screen{
font-size: 6em;
}
.container{
font-size: 10px;
}
Если вы используете #TP_splash_screen как элемент, который является прямым потомком элемента body, тогда ваш шрифт будет 6em из 12 пикселей (в 6 раз больше размера 12 пикселей «M»). Если вы используете #TP_splash_screen как элемент, который является потомком элемента container, тогда ваш шрифт будет иметь размер 6em из 10 пикселей (в 6 раз больше размера 10 пикселей «M»).
EM - отличная единица измерения для работы с гибкими, адаптивными макетами, это не фиксированные единицы измерения.
font-sizeдля этого элемента не переопределено. Также проверьте, не установили ли выfont-sizeдля любого другого родительского элемента, поскольку это свойство наследуется