Css calc在具有线性渐变的IE11中不起作用答案

【问题标题】：Css calc not working in IE11 with linear gradientCss calc在具有线性渐变的IE11中不起作用
【发布时间】：2017-10-17 02:08:52
【问题描述】：

*{
  margin:0; padding: 0;
}
body {
 background-color: orangered;
}
.content {
  margin-top: 200px;
  height: 100vh;
  background-color: #fdfdff;
}
.tilt {
  position: relative;
}
.tilt:before {
  content: '';
    padding-top: 8.74887%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    background-image: linear-gradient(5deg, #fdfdff calc(50% - 1px), transparent 50%);
}

<div class="content tilt">

</div>

IE11 似乎在理解 calc() css 属性方面存在一些问题。

我以这种方式使用带有线性梯度的 calc：

background-image: linear-gradient(5deg, #fdfdff calc(50% - 1px), transparent 50%);

但是当我这样使用它时：

background-image: linear-gradient(5deg, #fdfdff, transparent 50%);

它可以正常工作。

还有一件事我不明白。当我在 IE11 中检查该属性时，将其关闭并重新打开即可。

使用 calc(50% - 1px) 的重点是角度看起来更平滑，就是这样。

有什么建议吗？

【问题讨论】：

IE 对calc 值继承有点挑剔。它从什么继承了 50%？一个更完整的演示，比如 minimal reproducible example 会很有帮助。
我在帖子中添加了示例。希望对您有所帮助。
Per Caniuse.com，似乎 IE11 在生成的内容（包括 ::before/::after 伪元素）中不正确支持 calc
当我在小提琴中运行它时，它不会在我的 IE11 中发生：jsfiddle.net/314hphyd
你想在这里计算什么？新的十六进制颜色值？

标签： css internet-explorer-11 css-calc

【解决方案1】：

我找到了解决方案。在我的 sass mixin 中，我添加了：

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { background: linear-gradient($angle, $color 50%, transparent 50%); }

现在它可以按我的意愿工作了。

【讨论】：