以线性渐变计算不适用于IE/Edge

Question

IE和Edge似乎无法在此渐变中正确计算高度。有没有人有办法解决吗？

background: linear-gradient(180deg, rgba(255,255,255,0) 100px, #f5f5f5 100px, #f5f5f5 calc(100% - 100px), rgba(255,255,255,0) calc(100% - 100px)); 

Answer 1

在这种情况下，因为使用的是透明的“条纹”，可以通过使用线性梯度都只会50高度的％欺骗。

你开始一个从顶部和底部

div { 
 
    height: 100vh; 
 
    background: 
 
    linear-gradient(180deg, transparent 100px, #f5f5f5 100px, #f5f5f5 50%, transparent 50%), 
 
    linear-gradient(0deg, transparent 100px, #f5f5f5 100px, #f5f5f5 50%, transparent 50%); 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: pink; /* for demo purposes */ 
 
}

<div></div>

Codepen Demo

第二