Css calc not working in IE11 with linear gradient

问题

*{
  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>

It seems that IE11 has some problems understanting calc() css property.

I am using calc with linear-gradient in this way:

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

But when I use it as this:

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

It works without problems.

And there is one more thing that I don't understand. When I inspect that property in IE11, turn it off and back on it works.

The whole point of using calc(50% - 1px) is that angle looks smoother, that is it.

Any suggestions?

回答1:

I found solution. In my sass mixin I've added:

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

Now it works as I wanted to.

来源：https://stackoverflow.com/questions/44027789/css-calc-not-working-in-ie11-with-linear-gradient