I have encountered an issue with my html and css code that uses absolute positioning. While it functions correctly on Chrome and Firefox, I am facing a problem with Internet Explorer. The absolute position property in the SVG class does not seem to work in IE, causing the SVG image to be out of alignment.
Here is 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>
This is 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%;}
If anyone knows how to resolve this issue, I would greatly appreciate your help. Thank you!