*{
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) 的全部意义在于 Angular 看起来更平滑,就是这样。
有什么建议吗?
最佳答案
我找到了解决方案。 在我的 sass mixin 中,我添加了:
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { background: linear-gradient($angle, $color 50%, transparent 50%); }
现在它如我所愿地工作了。
关于Css calc 在具有线性渐变的 IE11 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44027789/