2017-03-15 14 views
0

https://plnkr.co/edit/SQWYTqV93dVw3WNnLSuT?p=preview關閉圖標時,我認爲這與Chrome瀏覽器的IE 11

沒有白X將很難看到,但在右上角有與白X黑圈,但在IE沒有白十,任何想法爲什麼或如何讓白色X出現在IE中?

.close-icon 
{ 
    position: absolute; 
    top: -5px; 
    right:-5px; 
    display:block; 
    box-sizing:border-box; 
    width:20px; 
    height:20px; 
    border-width:3px; 
    border-style: solid; 
    border-color:black; 
    border-radius:100%; 
    background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%); 
    background-color:black; 
    box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5); 
    transition: all 0.3s ease; 
} 
+0

IE不支持'-webkit-線性gradient' ... –

+0

它支持什麼類似的,可以給我一個像這樣的白色X? – user441521

+0

爲什麼不只是渲染一個「X」字符或時間「⨉」字符而不是使用hacky漸變? –

回答

2

IE不支持-webkit-前綴,所以它忽略了您的漸變,因此不會呈現。一個更好的解決辦法是完全的忽略梯度和使用明確的符號,例如,

.close { 
 
    border-radius: 50%; 
 
    width: 20px; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 10px; 
 
    background-color: black; 
 
    text-align: center; 
 
    line-height: 20px; 
 
    box-shadow: 0 0 5px 2px rgba(0,0,0,0.5); 
 
} 
 

 
.close::before { 
 
    content: '×'; 
 
    color: white; 
 
}
<div class="close"></div>

相關問題