CSS 位置：绝对不能在 IE11 上正确显示答案

【问题标题】：CSS Position: Absolute not displayed correctly on IE11CSS 位置：绝对不能在 IE11 上正确显示
【发布时间】：2020-09-13 04:47:30
【问题描述】：

我有一个使用绝对位置的 html 和 css 代码。它在 chrome 和 firefore 上运行良好。但是好像svg类中的position absolute属性在IE中不起作用，导致svg图片不在边框内。

我的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>

我的 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%;}

有没有办法解决这个问题，请帮助我。谢谢大家。

【问题讨论】：

这能回答你的问题吗？ SVG position:absolute in IE 11

标签： html css

【解决方案1】：

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

只要检测浏览器是否为 IE11 并更改 IE11 的设计

【讨论】：