直線勾配のcalcは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

から二番目のいずれかを起動します