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

在这种情况下，当您使用透明＆＃34;条纹＆＃34;时，您可以作弊使用两个线性渐变，两者都只占50％高度。

你从顶部开始一个，从底部开始第二个

＆＃13;

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 */
}

＆＃13;

<div></div>

＆＃13;

Codepen Demo

线性渐变中的calc在IE / Edge中不起作用

1 个答案: