线性渐变不显示在IE 11

我知道这个问题是什么流行，但我不能得到它。我不太清楚css如何在多个浏览器上运行，抱歉。我试图使用在先前被剥夺主题的咨询方法，但我无法得到它。线性渐变不显示在IE 11

下面是用HTML CSS样式。我正在测试这https://html5-editor.net/。

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

建议使用，但在11版IE浏览器，但它没有工作。任何人都可以帮忙吗？

更新：我已经使用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在所有的，我可以用一些替代品？

来源

2016-11-11 Andrew

.Gradient doenst也有帮助 – Andrew

你缺少前过滤CSS属性分号。还可以使用'autoprefixer'来编写旧的浏览器兼容的CSS。 –

它does not帮助...（（（（（也（我也发现这个https://msdn.microsoft.com/library/hh801215(v=vs.85).aspx，似乎过滤器已被弃用在IE 10+ – Andrew

参照caniuse，background:linear-gradient()不受IE11支撑。

正如Mr_Green所述，您应该使用Autoprefixer，至少可以在支持它的浏览器上工作 - 您特别缺少的是-webkit前缀。

来源

2016-11-11 10:14:22 wscourge

我试图设置过滤器和设置浏览器之间的区别，但它仍然无法正常工作，在IE按钮像标签没有从下面虚线线性渐变 – Andrew

您可以尝试在IE中设置“下划线”样式按钮进行测试，并看看它没有显示。 – Andrew

下面是使用的CSS样式梯度的按钮的样品。伊夫在IE 11测试了它和它的工作

CSS代码

.gradient { 
padding: 10px 30px; 
border: none; 
color: white; 
border-radius: 5px; 
padding: 15px 32px; 
text-align: center; 
background: rgb(169,3,41); 
font-size: 16px; 
cursor: pointer; 

/* Start of gradient */ 

background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); 
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 
background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019',GradientType=0); 
}

HTML代码

<button class="gradient">Button</button>

这里是一个工作演示一个fiddle。我测试IE11，我认为它的工作原理就可以了：/

这是一个非常有用的CSS Gradient online tool，可以帮助。它有助于修复必要的兼容性前缀，你需要

来源

2016-11-11 10:24:40 Ojanti

线性渐变不显示在IE 11

回答

相关问题