CSS IE11 中的 hsl 计算错误

Question

IE11 似乎不计算 hsl(31, 86, calc(54% - 10%))，但所有其他浏览器都计算。

我想在具有 CSS 自定义属性（css 变量）的 hsl 值中使用 calc。而且我不想使用 SASS 函数。（我使用这个 polyfill 来为 IE11 使用 css 变量。 https://github.com/jhildenbiddle/css-vars-ponyfill )

:root{
  --accent-color-h: 31;
  --accent-color-s: 86%;
  --accent-color-l: 54%;
}
.darken .accent-color{
  background-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 10%));
  }

Answer 1

IE does not support calc() on color functions. Example: color: hsl(calc(60 * 2), 100%, 50%).

来源：https://caniuse.com/#feat=calc

在这种情况下，您需要抓取 calc() 的要求

CSS IE11 中的 hsl 计算错误

CSS hsl calc bug in IE11

css

hsl

calc

internet-explorer-11