2017-09-13 101 views
6

neden:IE11 border-radius ve kutu gölge birlikte benim Kanunu takiben sorunlara

div{ 
 
    display: block; 
 
    width: 500px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    transition: box-shadow 1s; 
 
} 
 

 
div:hover{ 
 
    box-shadow: 25px 25px 0px #000; 
 
}
<div>Test</div>

O Krom, Safari ve Firefox üzerinde çalışır halde Internet Explorer 11 iyi çalışmıyor div artık odaklanmadığında belirgin görsel problemler vardır. Onları nasıl çözebilirim?

JSFiddle: çok az daha iyi hale getirmek için Güncelleme https://jsfiddle.net/aL0t8g21/

+0

Nasıl IE 11'de iyi çalışıyor? IE10, 11 ve Edge hepsi bana Chrome olarak aynı görünüyor. –

+1

@JenniferMichelle Bob'un anlattığı gibi div'u gezerken garip eserler görebiliyorum. IE'nin oluşturma motoruyla ilgili bir problem gibi görünüyor, bu yüzden çözmenin zor olduğuna inanıyorum. Gölge animasyonu için bir JS geçici çözümü kullanmayı deneyebilirsiniz, bu saf bir IE çözümü için biraz fazla olsa bile, –

+0

Evet, bunu çözmeyi denedim, ayrıca @MatthiasS ile aynı fikirdeyim. IE ** 'nin oluşturma motoruyla ilgili bir ** problemi, eğer isterseniz: 'after' veya': before before you kullanarak sizin için bir geçici çözüm oluşturabilirim. – weBBer

cevap

1

.

yorumun İsteğiniz, burada div size :after veya :before kullanmak için bir geçici çözüm olduğunu.

div { 
 
    display: block; 
 
    width: 500px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    transition: box-shadow 1s; 
 
    position: relative; 
 
    background: #fff; 
 
} 
 

 
div:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: 500px; 
 
    height: 200px; 
 
    border-radius: 5px; 
 
    background: #000; 
 
    left: 0; 
 
    top: 0; 
 
    opacity: 0; 
 
    transition: all 1s ease-in-out; 
 
    z-index: -1; 
 
} 
 

 
div:hover:after { 
 
    left: 25px; 
 
    top: 25px; 
 
    opacity: 1; 
 
}
<div>Test</div>

jsfiddle

Bu IE11 test ediyoruz