Используя Em, почему браузер неправильно вычисляет Padding, Margin, line-height?

Question

Я начинаю новый проект и думал, что дам их назад, но я заметил, что при использовании em для Padding, Margin, line-height и т. Д. (Что угодно, кроме шрифтов) браузеры не рассчитывают их должным образом.

Пример:

Я использовал Firebug, чтобы быстро расположить элементы вокруг пикселей, а затем перевел их в свою таблицу стилей, используя формулу размера пикселя / базовый шрифт. итак, 25 пикселей / 16 пикселей = 1,5625

Когда я обновлял свой браузер, элемент был на несколько пикселей меньше, и, похоже, мне нужно было округлить его вверх или вниз, или в одном случае он действительно отсутствовал!

Это только я или кто-то еще заметил или есть решение?

Ответ: мой базовый шрифт был неправильным!!

Answer 1

Я перевел их в моей таблице стилей, используя размер пикселя формулы / основной шрифт. так 25px / 16px

Если вы используете ems, лучше оставить пиксели позади. Идея базового шрифта 16px ненадежна. Это всего лишь общее руководство, так как вы не знаете, каков реальный размер базового шрифта (системного шрифта) пользователя, потому что они могут установить его на что угодно (хотя большинство людей, вероятно, не трогают его).

И когда вы работаете с процентами пикселей, каждый браузер имеет свой собственный способ решения этой проблемы (например, округление вверх или вниз), и вы должны позволить браузеру делать свое дело. В Интернете все относительно, и если у вас все элементы страницы установлены в правильных пропорциях друг к другу, дизайн должен хорошо работать при любом уровне масштабирования или ширине области просмотра.

Answer 2

EM становятся сложными, когда вложены в дочерние элементы. Например, если вы используете body font-size: is 16px, а затем в заголовке у вас есть 1.1em, то внутри этого заголовка у вас есть пункт меню, и вы установите его в 1em, он будет равен родительскому значению в 1.1em(большинство скорее всего около 18px).

Обходной путь - использовать REM, что означает "корневой" EM. Это предотвратит сложение размеров при вложении. Однако в разных браузерах это ограничено. Чтобы обойти это, вы используете запасной вариант PX. В качестве альтернативы любой браузер будет использовать последнее приемлемое правило. Если он не понимает правило (REM), он игнорирует его, используя PX.

header {
   font-size: 18px;
   font-size: 1.1rem;
}
nav {
   font-size: 16px;
   font-size: 1rem;
}

Наконец, важно понимать, что EM/REM похожи на PERCENTAGES, а не на фиксированные пиксели.