IE11上无效的calc()

为什么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);
  ...
}

calc是从scss编译而来的,它们是多个嵌套变量(每个包含calc)的结果。如果问题是嵌套calc(),如何强制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(如开头发布的变量)

一些想法?

c17789642 回答:IE11上无效的calc()

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

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

本文链接:https://www.f2er.com/1420391.html

大家都在问