IE11 中奇怪的黑色 'outer border' 外边框

Question

我一直在创建带有图标的传单地图。这些图标周围都有一个 1 像素的白色边框。这工作正常，但在 IE11 中，边框外有一些奇怪的、非常小的黑线。

我一直在四处寻找解释，但在网上找不到任何相关信息。有谁知道什么会导致这个外部 'line'？

我在 div 元素上使用的 CSS 下面。

.lfpt-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 50%;
    position: relative;
    top: 2px;
    margin: 0 5px 0 5px;
    border: 1px solid white;
    width: 28px;
    height: 28px;
    background-color: rgb(66, 20, 95);
}

这里是图标包装的HTML

<div class="lfpt-icon-wrapper" aria-label="5G Fieldlab icoon" role="img" aria-hidden="true">
  <span class="lfpt-icon g-fieldlab"></span>
</div>

cirlce中的图片是span元素内部动态设置的base64背景图片。

希望有人能进一步帮助我！

Answer 1

删除边框并将其设为0。边框：0；

Answer 2

border-radius IE11 中似乎有一个老错误。

尝试将此行添加到您的 class:

background-clip: padding-box;

如果你遇到奇怪的边缘或者圆不是很圆你可以尝试添加这条线：

box-sizing: border-box;

IE11 中奇怪的黑色 'outer border' 外边框

Weird black 'outer border' outside border in IE11

css

border

stylesheet