IE11 上的 calc() 无效答案

【问题标题】：Invalid calc() on IE11IE11 上的 calc() 无效
【发布时间】：2021-01-25 05:51:59
【问题描述】：

为什么 IE11 不能计算这个？我从控制台看到它发现它无效（在编译的样式中，它带有红色下划线）

h6 {
  ...
  font-size: calc(calc((( (20 / 16) / 16 - 1 / 16) * (100vw - 20rem) / (992 / 16 - 20) + 1 / 16 * 1rem) * 16));
  ...
}

但是这个是正确的：

body {
  ...
  font-size: calc((( (20 / 16) / 16 - 1 / 16) * (100vw - 20rem) / (992 / 16 - 20) + 1 / 16 * 1rem) * 16);
  ...
}

计算是从 scss 编译的，它们是多个嵌套变量的结果（每个变量都包含一个计算）。如果问题是嵌套 calc()s 我如何强制 Sass 删除内部 calc() 函数？

是这样的：

  --f-min-font-size: 16;
  --f-max-font-size: 20;
  --f-text-gradient: (( (var(--f-max-font-size) / var(--f-min-font-size)) / 16 - var(--f-foot)) * var(--f-hill));
  --text-scale-ratio: 1.200;

  --body-font-size: calc(var(--f-text-gradient) * var(--f-min-font-size));

  --h6-font-size: calc(var(--body-font-size));
  --h5-font-size: calc(var(--h6-font-size) * var(--text-scale-ratio));
  --h4-font-size: calc(var(--h5-font-size) * var(--text-scale-ratio));
  --h3-font-size: calc(var(--h4-font-size) * var(--text-scale-ratio));
  --h2-font-size: calc(var(--h3-font-size) * var(--text-scale-ratio));
  --h1-font-size: calc(var(--h2-font-size) * var(--text-scale-ratio));

CSS 变量（自定义属性）通过 Webpack postcss-custom-properties 编译为可从 IE 读取的普通 CSS（如开头发布的那些）

一些想法？

【问题讨论】：

这可能被认为是该包中的一个错误……但看起来您已经显示了产生正确结果的变量 (font-size)。 margin-bottom 是如何定义的？
嗨@Ry-这只是为了简单起见，我编辑了帖子以使其更清晰。不知道是不是postcss-custom-properties的bug。如果问题是嵌套的 calc()s，删除内部的看起来像优化？我找到了这个包但不知道github.com/postcss/postcss-calc
会不会是body和h6标签上font-size的默认单位不同。
我尝试检查浏览器对Calc()的支持，发现在IE浏览器中部分支持。 IE 有一些与 Calc() 相关的已知问题。您可能会遇到已知问题之一。请检查上述链接中的已知问题部分。我还发现 SASS 的 Calc() 存在一些问题。我建议你也检查一下。

标签： css internet-explorer sass internet-explorer-11 css-calc

【解决方案1】：

我知道这是一个老问题，但我认为它与嵌套计算函数有关。https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11

您可以做的是手动删除 calc 中的 calc 或使用我的 postcss 插件https://www.npmjs.com/package/postcss-remove-nested-calc

【讨论】：