表格行上的渐变背景在 IE 中不起作用

Question

我有一个表格，它的行将用衬里渐变背景图像着色，这在 Firefox 和 Chrome 中可以正常工作 - 但在 IE / Edge 中不行。正如您在下面链接的 JSFiddle 中所见，渐变在 IE 中的简单 div 元素中起作用 - 但在应用于表格行元素时不起作用。

线性背景示例：

.gradient {
 background-image: linear-gradient(210deg, #FFF133 0%, #16D611 50%, #00A3EF 80%); 
}

这是我要完成的工作的 JSFiddle： https://jsfiddle.net/q9jkoa52/

我在几个平台上遇到过类似的问题，但我没有看到所有建议的修复工作，或者我自己无法工作。即使在 IE 中打开“固定”的 JSFiddles，实际上也不是固定的。

有没有办法让它工作？

Answer 1

如果你只留下background-attachment: fixed; 它工作正常

.gradient {
 background-image: linear-gradient(210deg, #FFF133 38%, #16D611 46%, #00A3EF 59%); 
    background-attachment: fixed;
}

并且应该设置表width=100%

Answer 2

经过多次摆弄，我得出了这个结果，希望对您有所帮助（注意不同的渐变CSS规则；您需要根据自己的喜好玩弄这些值；另外：仅在IE中测试过）：

.gradient {
 background-image: linear-gradient(210deg, #FFF133 38%, #16D611 46%, #00A3EF 59%); 
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.gradientRow {
 background-image: linear-gradient(210deg, #FFF133 51%, #16D611 61%, #00A3EF 67%); 
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.solid {
  background-color: aqua;
}
.box {
  width:200px;
 height:200px;
}
table, tr, td, th {
  border: 2px solid black
}

<div class="gradient box"></div>
<table>
<thead>
  <tr>
    <th style="width:20%;">Column 1</th>
    <th style="width:50%;">Column 2</th>
    <th style="width:30%;">Column 3</th>
  </tr>
</thead>
<tbody>
  <tr class="solid"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr class="gradient"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</tbody>
</table>