表格行上的渐变背景在 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

在许多摆弄之后，我得到了这个结果，希望它能有所帮助(请注意不同的梯度CSS规则；您需要根据您的偏好来处理值；另外：仅在In中进行测试即(：

.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>

Answer 2

如果仅离开 background-attachment: fixed;，则可以正常工作

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

应该设置表width=100%