时间戳

首页 > 解决方案 > calc() 函数不返回百分比

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

问题描述

我正在为 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 上不起作用……

标签： csscss-variables

解决方案

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

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

所以我相信这不是你的代码的错，“计算”它只是不能在 IE 上运行

推荐阅读