IE11 中奇怪的黑色“外边框”外边框答案

【问题标题】：Weird black 'outer border' outside border in IE11IE11 中奇怪的黑色“外边框”外边框
【发布时间】：2019-09-18 01:24:09
【问题描述】：

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

我一直在四处寻找解释，但在网上找不到任何相关信息。有谁知道是什么导致了这条外部“线”？

在 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>

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

希望有人可以进一步帮助我！

【问题讨论】：

嗨，Camille，你能不能也提供你的 HTML 代码
嘿@RémyTesta 我已经添加了图标元素的HTML

标签： css border stylesheet

【解决方案1】：

在 IE11 中似乎存在 border-radius 的旧错误。

尝试将此行添加到您的课程中：

background-clip: padding-box;

如果您遇到奇怪的边缘或圆圈不是很圆，您也可以尝试添加此行：

box-sizing: border-box;

【讨论】：

如果我的帖子对您有帮助，请标记为正确答案！谢谢！ :)

【解决方案2】：

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

【讨论】：

我确实需要边框，所以禁用并不能解决问题。我只是希望它在 IE11 中像在 Chrome 中一样工作