Почему пропадает текст в em?

Question

[oleg_ti]

Тема такая, есть хэдер, в нем есть текст, при задании тексту font-size в em, текст пропадает (если быть точнее, он схлопывается по ширине), при задании в vh/vw/px все работает.
В чем может крыться причина и как это решить?
https://jsfiddle.net/fps11/j6k0r89c/ (.menu-top-inner a)

Comments

[Шохрух Шаймардонов]

Не понятно, что у всех и как схлопывается. Код в песочницу киньте

[oleg_ti]

Шохрух Шаймардонов, добавил в вопрос

[Шохрух Шаймардонов]

oleg_ti, вроде все работает

Answer 1

[Ivan Bogachev]

Что такое 1em? Это текущий размер шрифта. Когда вы задаете размер шрифта в единицах em, браузер считает этот размер относительно родительского размера шрифта. Но у html вы задаете font-size равный 0px. В данном случае это означает, что у всех потомков 1em будет равен нулю до тех пор, пока вы не зададите какое-то другое значение не в em/rem, тогда у потомков того элемента 1em будет равен заданному значению.

P.S.: Задавать font-size равный нулю для html - это не лучшая идея, она может приводить к самым разным багам, а также проблемам, когда у пользователей в браузере настроены ограничения на размер шрифта для html.

Comments

[Сергей delphinpro]

Задавать font-size равный нулю для html — это вообще нонсенс. Первый раз за 10 лет слышу подобную фразу.