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

Question

​

*{
  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)的全部目的是让角度看起来更平滑，仅此而已。

有什么建议吗？

Answer 1

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

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

现在它可以像我想的那样工作了。