-webkit-calc 函数在 firefox 中不起作用。有没有其他选择？答案

【问题标题】：-webkit-calc function does not work in firefox. Is there any alternative?-webkit-calc 函数在 firefox 中不起作用。有没有其他选择？
【发布时间】：2020-07-01 15:04:58
【问题描述】：

我有一个宽度为68px 的徽标，我想在页面的顶部中心显示这个徽标。所以我把它放在导航栏中，我给它这个样式：

.center{
  position: absolute;
  left: -webkit-calc(50% - 34px);
  right: -webkit-calc(50% - 34px);
  img{
    margin: 11px 0px 0px 0px;
  }
}

一开始我用left: 50%和right: 50%，但是有一个问题：logo的大小没有计算，所以它没有出现在中心（正好是中心！）所以我用@987654328 @ 计算徽标的大小。问题是它在 Chrome 中有效，但在 Firefox 中无效！

这是 Firefox 在inspect element 中显示的内容：

对于firefox这个功能有替代品吗？

【问题讨论】：

使用不带-webkit-的回退
developer.mozilla.org/en-US/docs/Web/CSS/calc
也不需要 -webkit- 前缀

标签： javascript html css google-chrome firefox

【解决方案1】：

只需使用calc:

.center{
  position: absolute;
  left:  calc(50% - 34px);
  right: calc(50% - 34px);
  img{
    margin: 11px 0px 0px 0px;
  }
}

-webkit- 是 Safari 和基于 Chromium 的浏览器（Chrome、Chromium、Brave、新的 Microsoft Edge）使用的前缀。（-moz- 是 Firefox [for "Mozilla"] 使用的那个；IE 和 Legacy Edge 使用 -ms-）但是 calc 已经有一段时间不需要前缀了。

【讨论】：