IE11 बॉर्डर-त्रिज्या और बॉक्स छाया एक साथ मेरे कोड के बाद समस्याओं

Question

कारण:

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>

यह क्रोम, सफारी और Firefox पर काम करता है, लेकिन यह Internet Explorer 11 पर अच्छी तरह से काम नहीं करता है , स्पष्ट दृश्य समस्याएं हैं जब div अब ध्यान केंद्रित नहीं कर रहा है। उन्हें कैसे हल करें?

JSFiddle: https://jsfiddle.net/aL0t8g21/

Answer 1

यह थोड़ा बेहतर बनाने के लिए अपडेट किया गया।

टिप्पणी से आपके अनुरोध के अनुसार, यहाँ आप :after या :before का उपयोग कर के आप div के लिए एक वैकल्पिक हल है।

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

यह IE 11.