線性漸變不顯示在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

回答

相關問題