Bootstrap 4 - сильно отличающиеся размеры отображаемых шрифтов в Ubuntu Chrome и Firefox

Question

Я занимаюсь разработкой сайта на Ubuntu. Когда я смотрю на него в Firefox, он намного меньше, чем когда я смотрю в Chrome. Скриншоты:

В обоих браузерах шрифты по умолчанию имеют значение DejaVu Serif с разрешением 16 пикселей. Я не испортил размер шрифта Bootstrap по умолчанию. Это все еще 1rem.

Чем объясняется это расхождение, и есть ли способ еще больше нормализовать различия между браузерами?

РЕДАКТИРОВАТЬ: мой scss, хотя это не имеет значения, потому что было запрошено:

$theme-colors: (
    "burnt-orange": #fa7334,
    "light-blue": #67e2f5,
    "dark-blue": #006f80,
    "beige": #f5d5bc
);

.header-icon {
  font-size: 1.4rem;
}

#jumbo {
  background: transparent;
  border: 1px solid grey;
}

#diva-sidebar ul {
  list-style-type: none;
  padding-left: 0.65em;
}

#footer a {
  color: white;
}

.errors {
  border: 1px solid #c70f36;
  color: #c70f36;
  background-color: #ffc0cb;
}

@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-pro/css/all.css";

.header-icon-link-blue {
  color: theme-color("dark-blue") !important;

  :hover {
    color: theme-color-level("dark-blue", 2) !important;
  }
}

.header-icon-link-orange {
  color: theme-color("burnt-orange") !important;

  :hover {
    color: theme-color-level("burnt-orange", 2) !important;
  }
}

.color-burnt-orange {
  color: theme-color("burnt-orange");
}

РЕДАКТИРОВАТЬ: после добавления

html {
    font-size: 16px;
}

В мой файл custom.scss, но проблема сохраняется.

Answer 1

Я обнаружил похожую проблему при разработке сайтов с использованием Bootstrap 4.x. Проблема заключается в том, что Bootstrap использует размер шрифта браузера по умолчанию, а затем устанавливает относительные размеры шрифта из этого. Тем не менее, Firefox и Chrome, похоже, используют разные размеры по умолчанию, что наиболее заметно вызывает проблемы при использовании более крупных шрифтов в заголовках. Самое простое решение - установить точный базовый размер шрифта в HTML, чтобы переопределить браузер по умолчанию, например:

html {font-size:16px;}

Answer 2

Я думаю, вам нужно добавить префикс вашего кода CSS. Потому что у всех браузеров есть префиксный код: -webkit, -o, -moz ets. Перейдите по этой ссылке и пройдите левую колонку css и скопируйте css из правой колонки: например: Пожалуйста, отметьте его как Ответ, если это решило вашу проблему:)