CSS Calc在线性渐变的IE11中不起作用 [英] Css calc not working in IE11 with linear gradient
本文介绍了CSS Calc在线性渐变的IE11中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
*{
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属性方面存在一些问题.
It seems that IE11 has some problems understanting calc() css property.
我以这种方式使用具有线性梯度的calc:
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%);
它可以正常工作.
还有一件事我不理解.当我在IE11中检查该属性时,将其关闭然后重新启用即可.
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.
使用calc(50%-1px)的要点就是角度看起来更平滑了.
The whole point of using calc(50% - 1px) is that angle looks smoother, that is it.
有什么建议吗?
推荐答案
我找到了解决方案. 在我的混蛋混音中,我添加了:
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.
这篇关于CSS Calc在线性渐变的IE11中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文