css - calc() 函数不返回百分比

Question

我正在为 CSS 自定义属性使用 polyfill。

这是我的变量(在现代浏览器上一切正常):

--main-color-hue: 205;
--main-color-saturation: 73%;
--main-color-luminosity: 29%;

--main-color:       hsla(var(--main-color-hue), var(--main-color-saturation), var(--main-color-luminosity), 1);
--main-dark-color:  hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 0.5), 1);
--main-light-color: hsla(var(--main-color-hue), var(--main-color-saturation), calc(var(--main-color-luminosity) * 1.5), 1);

--main-text-color:       hsl(0,100%, calc((30% - var(--main-color-luminosity))     *100)); 
--main-dark-text-color:  hsl(0,100%, calc((30% - var(--main-color-luminosity)*0.5) *100)); 
--main-light-text-color: hsl(0,100%, calc((30% - var(--main-color-luminosity)*1.5) *100));

使用 polyfill，我得到了 --main-text-color 的结果:

a {
background-color: red;
color: hsl(0,100%, calc((30% - 29%) * 100));
}

<a href="#">My link</a>

而且这个结果在 IE10 和 IE11 上不起作用...

Answer 1

您的语义是正确的，但是，如 caniuse.com 中所述在“已知问题”选项卡中:

“IE 不支持颜色函数的 calc()。示例:颜色:hsl(calc(60 * 2), 100%, 50%)。”

所以我相信这不是您的代码的错，“calc”只是在 IE 上不起作用