html - IE 11 中不显示线性渐变

Question

我知道这个问题很热门，但是我不会。抱歉，我不熟悉 CSS 在多种浏览器上的工作方式。我尝试使用之前被剥夺的主题中引用的方法，但我无法获得。

这是带有 CSS 样式的 HTML。我正在 html-editor 中对此进行测试.

.underlined {
    height: auto;
    width: auto;
    position: relative;
    border: 0;
}
.underlined:before {
    width: 100%;
    content: '';
    position: absolute;
    bottom: -2px;
    height: 2px;
    background:linear-gradient(to right, white, black);
    background:-ms-linear-gradient(right, white, black)
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=white, endColorstr=black,GradientType=0 );
}
.underlined:after {
    width: 100%;
    content: '';
    position: absolute;
    left: 2px;
    bottom: -2px;
    height: 0;
    border-top: 2px dotted white;
}
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

<h2>CSS Buttons</h2>
<label class="underlined">Link Button</label>
<button class="underlined">Button</button>
<input type="button" class="button" value="Input Button">

这两件作品:

background:-ms-linear-gradient(right, white, black)
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=white, endColorstr=black,GradientType=0 );

建议使用，但在IE 11版本中，却不起作用。 有人可以帮忙吗？

更新:我使用 autoprefixer 使我的 CSS 文件更好，我有了新的 CSS:

.underlined {
    height: auto;
    width: auto;
    position: relative;
    border: 0;
}

.underlined:before {
    width: 100%;
    content: '';
    position: absolute;
    bottom: -2px;
    height: 2px;
    background:-webkit-linear-gradient(left, white, black);
    background:linear-gradient(to right, white, black);
}
.underlined:after {
    width: 100%;
    content: '';
    position: absolute;
    left: 2px;
    bottom: -2px;
    height: 0;
    border-top: 2px dotted white;
}

而且，它仍然不适用于 IE 11 中的按钮。我想我已经使用了所有建议，mb 我错过了什么？ 好的，如果线性渐变在 IE 11 上根本不起作用，我可以使用一些替代方法吗？

Answer 1

引用caniuse , background:linear-gradient() IE11 不支持。

如 Mr_Green 的评论中所述, 你应该使用 Autoprefixer ，至少让它在支持它的浏览器上工作——你特别缺少的是 -webkit 前缀。