在 css-template 中使用“fr”符号在 firefox 82.0 中不起作用

问题描述

我正在开发一个带有导航栏的网站，并使用 autoprefixer 来实现“最近 5 个版本”的兼容性。 为了将元素定位在标题内，我使用了 grid-template。

Firefox v.82.0 中发生了一些奇怪的事情 如果我仅使用“fr”测量单位定义模板列的尺寸，则会破坏布局。但是如果我将至少一个列单位大小更改为 px 或 % 它会突然起作用

这是代码（已清理，因为我使用的是 React 和 SCSS 模块，它伤害了眼睛，太多的咔嗒声）：

.header-bar {
  display: grid;
  -ms-grid-rows: 1fr;
  -ms-grid-columns: 1fr 2fr auto;
  grid-template: "logo nav socials" 1fr / 1fr 2fr auto;
  background-color: rgba(#000,1);
  text-transform: uppercase;
  color: white;
  min-height: 4rem;
  max-height: 6rem;
  width: 100%;
}

.logo {
  grid-area: logo;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  padding: 10px;
  img {
    min-width: 100px;
  }
}

.nav-bar {
  grid-area: nav;
}

.social-links-group {
  grid-area: socials;
  display: flex;
  padding-right: 10px;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.social-link {
  margin: 0 1vw;
  width: 3%;
  padding: 2px;
  min-width: 25px;
  svg {
    fill: rgba($primaryFontColor,1);
  }
  svg:hover {
    fill: rgba($secondaryColor,1);
  }
}

<header class="header-bar">
  <div class="logo">
    <img src=".../" />
  </div>
  <nav class="desktop-nav-bar">
    <ul>
      <li><a aria-current="page" class="link active" href="">Link1</a></li>
      <li><a class="link" href="">Link2</a></li>
      <li><a class="link" href="">Link3</a></li>
      <li><a href="" class="link">Link4</a></li>
      <li><a class="link" href="">Link5</a></li>
    </ul>
  </nav>
  <div class="social-links-group">
    <a href="" class="social-link">
      ...
    </a>
    <a href="" class="social-link">
      ...
    </a>
    <a href="" class="social-link">
      ...
    </a>
  </div>
</header>

在 firefox v.82.0 上，它看起来像这样：

它应该是这样的：

现在，你们中的一些人可能会注意到我在 HTML 中不存在的类选择器“导航栏”上应用了样式。 但是，如上所述，如果我只将列单位大小之一替换为 px 或 %，即使不解决此特定问题也可以解决问题。

有人可以就为什么会发生这种情况提出合理的解释吗？

解决方法

我不确定目前使用单位 fr 是否是一个好主意。

浏览器似乎不太支持该单元，canIuse.com 将其标记为实验性...

我不确定我是否得到了正确的信息......

但也许你想自己检查一下：
https://caniuse.com/?search=CSS%20API%3A%20fr