IE11 국경 반경 및 상자 그림자 함께 내 코드에 따라 문제

원인 :IE11 국경 반경 및 상자 그림자 함께 내 코드에 따라 문제

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>

그것은 크롬, 사파리와 파이어 폭스에서 작동하지만 인터넷 익스플로러 11에서 잘 작동하지 않습니다 div가 더 이상 초점을 맞출 때 명백한 시각적 문제가 있습니다. 어떻게 해결할 수 있을까요?

JSFiddle : 그것은 조금 더 나은 수 있도록 업데이트 https://jsfiddle.net/aL0t8g21/

출처

2017-09-13 Bob

어떻게 IE 11에서 잘 작동? IE10, 11 및 Edge는 모두 Chrome과 동일하게 보입니다. –

@JenniferMichelle Bob이 설명하는대로 div를 가리키면 이상한 아티팩트를 볼 수 있습니다. Internet Explorer의 렌더링 엔진에 문제가있는 것처럼 보입니다. 따라서 해결하기가 어렵습니다. 당신은 순수한 IE 솔루션을 위해 너무 많은 비트 일지라도 그림자 애니메이션을위한 JS 해결 방법을 시도 할 수 있습니다. –

예, 나는 또한 그것을 해결하려고 노력했습니다. @MatthiasS에 동의합니다. ** IE의 렌더링 엔진에 대한 ** 문제. 원한다면, 당신이 div의': after' 또는': before'를 사용하여 당신을위한 임시 해결책을 만들 수 있기를 원한다면. – weBBer

코멘트에서 귀하의 요청에 따라, 여기 당신이 div에 당신이 :after 또는 :before을 사용하기위한 해결입니다.

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

이것은 당신이 IE11을 테스트

출처

2017-09-13 13:05:26 weBBer

IE11 국경 반경 및 상자 그림자 함께 내 코드에 따라 문제

답변

관련 문제