Mozilla 显示的 css 与 chrome 不同？

如何解决Mozilla 显示的 css 与 chrome 不同？

这是相关代码的css：

.hero-section {
  height: 60vh;
  width: 40vw;
  margin-bottom: 5rem;

  h2 {
    // color: rgb(177,2,2);
    font-weight: 1000;
    text-align: center;
    font-family: GreatVibes;
    letter-spacing: 0.2rem;
    color: white;
  }

  perspective: 100rem;
  color: white;
  width: 40rem;
  position: relative;
  &-frontend {
    color: rgb(221,119,50);
  }
  &-backend {
    color: rgb(15,219,42);
  }
  &-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 2rem;
    z-index: 1;
    text-align: center;
    font-weight: bold;
  }
}

结果如下：

我更改了 css 的每个属性，以查看是否有任何属性导致了问题，我意识到，如果更改 height 属性，更改会反映在 chrome 上，但会反映在 mozilla 上。

我使用了 normalize.css 并在主文件中使用了它，但没有帮助：

 import "normalize.css/normalize.css";

解决方法

我认为 i 与视口单位有关，在 Firefox 中不支持 VW 或 VH。尝试使用另一种单位

,

您是否尝试添加填充：0？ 过去在 mozilla 和 circles 上有一些类似的问题，它们通常与 paddings 相关。