问题描述
为什么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(如开头发布的变量)
一些想法?
解决方法
我知道这是一个老问题,但我认为它与嵌套的 calc 函数有关。https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
您可以做的是手动删除 calc 中的 calc 或使用我的 postcss 插件 https://www.npmjs.com/package/postcss-remove-nested-calc