Css 为什么页脚样式被切断了？

我在这里的页脚中有一些社交媒体链接，它们的样式是圆形的：

在Chrome上一切看起来都很好，但在Safari上，最后一个似乎被“切断”，我似乎不明白为什么

以下是我当前的SCS：

  .social-links {
    display: block;
    float: right!important;
    a {
      border-radius: 50%;
      padding: 10px 11px;
      font-size: 20px;
      background: $color3;
      color: $color2;
      margin-left: 5px;
      &:hover {
        background: $color4;
        color: $color2!important;
      }
    }
    i {
      width: 21px!important;
      height: 20px!important;
      text-align: center;
    }
  }

提前感谢您的帮助

---

在

的父元素之一中，社交链接

您正在将宽度更改为safari似乎难以解决的问题

快速修复方法是在

上重新应用宽度。社交链接

.social-link {
    text-align: right;
    min-width: -webkit-fill-available;
}

---

在

.social link

的父元素之一中，您正在将宽度更改为safari似乎难以解决的问题

快速修复方法是在

上重新应用宽度。社交链接

.social-link {
    text-align: right;
    min-width: -webkit-fill-available;
}

---

你能提供更多的代码以便重现这个场景吗？你能提供更多的代码以便重现这个场景吗？