關閉圖標時，我認爲這與Chrome瀏覽器的IE 11

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; 
}

來源

2017-03-15 user441521

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

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

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

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>

來源

2017-03-15 18:32:39

關閉圖標時，我認爲這與Chrome瀏覽器的IE 11

回答

相關問題