html - CSS背景渐变和文本background-clip在Internet Explorer中不起作用

h1 {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    text-align: center;
    letter-spacing: 0.5px;
    font-size: 2.4rem;
    background-image: -webkit-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245));
    background-image: -moz-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245));
    background-image: -ms-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245));
    background-image: -o-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245));
    background-image: linear-gradient(to right, rgb(140, 198, 63), rgb(0, 185, 245));
    background-clip: content-box;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: white;
    -moz-text-stroke-width: 2px;
    -moz-text-stroke-color: white;
    -ms-text-stroke-width: 2px;
    -ms-text-stroke-color: white;
    -o-text-stroke-width: 2px;
    -o-text-stroke-color: white;
    text-stroke-width: 2px;
    text-stroke-color: white;
}

<h1>Heading.. Appears good in Chrome but not in IE :( </h1>

上面是HTML和CSS代码。该代码在Google Chrome浏览器中运行良好。但是，相同的代码在Internet Explorer中无法正常工作-10,11，Edge。我怀疑错误是在背景剪辑中。请帮忙。

最佳答案

这里的问题是-webkit-text-stroke-width: 2px;仅在Edge中受支持。

IE11及以下版本不支持text-stroke和text-fill。

要进一步阅读，请检查此aricle。

关于html - CSS背景渐变和文本background-clip在Internet Explorer中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42760603/