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>

它適用於Chrome，Safari和Firefox，但它不會在Internet Explorer 11以及工作當div不再集中時，會出現明顯的視覺問題。如何解決它們？

的jsfiddle：https://jsfiddle.net/aL0t8g21/

來源

2017-09-13 Bob

如何工作正常，你測試IE11？ IE10,11和Edge對我來說都和Chrome一樣。 –

@JenniferMichelle如Bob所描述的，我可以在盤旋div時看到奇怪的工件。看起來像IE的渲染引擎的問題，因此我相信這很難解決。你可以嘗試在陰影動畫中使用JS解決方法，即使這對於純粹的IE解決方案來說可能有點太大 –

是的，我也試着解決它我同意@MatthiasS。它的IE **渲染引擎的**問題，如果你想我可以使用'：after'或'：before'你的div創建一個解決方法。 – weBBer

更新，使之更好一點。

按照從評論你的要求，這裏是一個解決辦法你使用: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

來源

2017-09-13 13:05:26 weBBer

IE11 - 邊界半徑和箱陰影一起導致問題

回答

相關問題