Css calc无法在IE11中使用线性渐变

时间:2017-05-17 14:31:55

标签: css css3 internet-explorer-11 css-calc

*{
  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)的重点是角度看起来更平滑,就是这样。

有什么建议吗?

1 个答案:

答案 0 :(得分:2)

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

button1

现在它按照我想要的方式工作。