将渐变文字与删除线/线组合
我在CSS中使用了渐变文本，我也希望能够在其中添加删除线。 这在Firefox中运行良好，但可惜不在Chrome中。 任何人都有想法如何让这两个浏览器的工作？
小提琴
.gradienttext {
background: -webkit-linear-gradient(#fff, #999);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.strike {
text-decoration: line-through;
}
<p class="gradienttext">
Does <span="strike">not</span> work.
</p>
我感到非常惊讶的是，有问题的代码使用-webkit-特定的道具和渐变语法，但刚才了解到Firefox已经提供了与这些-webkit-特定道具的兼容性。
现在删除的答案似乎已经接近于解释为什么它在Chrome中无法正常工作，但不够接近，并且现在已被删除（我不知道为什么），我会添加更完整的解释。
发现：
按照MDN， -webkit-text-fill-color的定义如下：
-webkit-text-fill-color CSS属性指定文本字符的填充颜色。 如果此属性未设置，则使用color属性的值。
并根据W3C规范的文本修饰属性，线条的颜色指定如下：
文字修饰所需的颜色应该从“颜色”属性值中派生出来 。
看起来Chrome似乎认为文本是透明的，所以透明颜色也通过该行。 因此我们不会看到任何线。 但是这是不正确的，因为根据规格，它应该使用属于color属性的值。
Chrome会正确设置color （对于问题片段，颜色为黑色，但即使将其更改为其他颜色也不起作用），但不会将其正确应用于线条。 例如，在下面的代码片段中，元素的color为绿色（从body继承），通过使用Dev console检查元素，我们可以看到color设置正确，但没有直通。
body {
background: black;
color: green;
}
.gradienttext {
background: -webkit-linear-gradient(#fff, #999);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.strike {
text-decoration: line-through;
}<p class="gradienttext">
The following dummy text should both be a long vertical gradient, and also be strikethrough, which works fine on firefox, but not chrome. <span class='strike'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</p>