CSS Position: Absolute not displayed correctly on IE11

Question

I have a html and css code that uses absolute position. It works fine on chrome and firefore. But it seems that the position absolute property in the svg class doesn't work in IE, making the svg image not in the border.

My html:

<div class="slider">
<i class='left-arrow'><svg viewBox='0 0 100 100'><path d='M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z'/></svg></i>
<i class='right-arrow'><svg viewBox='0 0 100 100'><path d='M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z' transform='translate(100, 100) rotate(180) '/></svg></i>
</div>

My css:

.slider i {position:absolute;top:40%;width:50px;height:50px;cursor:pointer;z-index: 4;margin:0;border:2px solid #fff;border-radius:100%;}
.slider > i:hover {background:#333133;border-color:#333133;transition: all .3s;}
.slider > i svg {position:absolute;fill:#fff;padding:20%;}

Is there a way to fix this, please help me. Thanks everyone.

Answer 1

https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent

Just detect if the browser is IE11 and change the design for IE11