Bootstrap 4-Ubuntu Chrome和Firefox中呈现的字体大小差异很大

Question

我正在Ubuntu上开发一个站点。在Firefox中查看时，它比在Chrome中查看时小得多。截图：

两种浏览器的默认字体都设置为16px的DejaVu Serif。我没有弄错Bootstrap的默认字体大小。仍然是1雷姆。

造成这种差异的原因是什么，有没有办法进一步规范浏览器之间的差异？

编辑：我的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。转到Link，经过css左列，然后从右列复制css：例如：如果解决了问题，请将其标记为“答案”：）