Почему у меня line-height на одном пк один, а на другом другой?

Question

Всем привет!
Недавно произошла забавная ситуация.
Верстал я значит макет и увидел, что почему-то по PP у меня идёт расхождение хотя всё задано верно.
Открываю DevTools и вижу, что высота блока совсем другая.
Пошёл проверять в Firefox и на удивление там всё нормально. -_-
Думаю ладно может быть я сошёл с ума и чтобы окончательно убедиться пошёл проверять в BrowserStack.
И что вы думаете?)
Высота блока там такая же, как и в Firefox у меня на пк.
Я действительно озадачен этой проблемой потому что непонятно из-за чего она произошла.

Вот скриншот с моего пк в браузере Edge Win 10 - https://ibb.co/j3bf8Wv
Скриншот с BrowserStack тоже Edge Win 10 - https://ibb.co/z4N1kKs

Стили, которые прописаны для текста через class:

.inner__desc {
  font-family: var(--third-font-family);
  max-width: 300px;
  line-height: 1.625; (или 26px)
}

Стили, которые наследуются от html:

html {
  font-size: 100%;
  line-height: 1.15; (перечёркнут, что логично ибо перебивает класс)
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

Если немного сюда подключить математику, то можно вычислить следующее height = line-height * кол-во строк.
Т.е. у меня высота должна равняться в Edge 130px, собственно, как и в Firefox, но нет там высота 128px.
Везде масштаб стоит 100%, так что это не из-за него.
Подскажите, может быть кто-то знает из-за чего такая проблема могла возникнуть :)

Answer 1

Стоит проверить масштабирование не только в браузере, а в самой ОС, что влияет на размер всех элементов на экране.

Answer 2

Задавайте line-height в rem

.inner__desc {
  font-family: var(--third-font-family);
  max-width: 300px;
  line-height: 1.625rem; (или 26px)
}

БЛОГ НА HUSL

Почему у меня line-height на одном пк один, а на другом другой?

Ответы (2 шт):