calc（）函数未返回百分比

Question

我正在将polyfill用于CSS自定义属性。

这是我的变量（现代浏览器上的所有功能）：

IndexError: single positional indexer is out-of-bounds

使用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)); 的结果：

--main-text-color

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

并且此结果在IE10和IE11上不起作用...

Answer 1

您的语义是正确的，但正如“已知问题”标签中的caniuse.com所述：

“ IE在颜色函数上不支持calc（）。例如：颜色：hsl（calc（60 * 2），100％，50％）。”

所以我认为这不是您的代码的错，而是“计算”在IE上不起作用