边框半径在 Safari 和 iPhone 设备上无法正常工作？答案

【问题标题】：Border-radius not working properly on Safari and on iPhone devices?边框半径在 Safari 和 iPhone 设备上无法正常工作？
【发布时间】：2021-10-04 18:55:08
【问题描述】：

我在一个图标上应用border-radius。该图标在 Chrome、Firefox 和 Edge 上看起来不错。但是，图标形状在 Safari 或其他 Apple 设备上略有变化。这是chrome上的图标图片

和 Safari

。如何使图标在所有设备和 Web 浏览器上看起来一致？这是 CSS：

<svg class="svg-inline--fa fa-bus fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"></path></svg>

.fa-bus{
    background: #0046add;
    display: block;
    color: white;
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 9px;
    margin-right: 7px;
}

【问题讨论】：

去掉 Padding 然后试试看，也许可行！
@Aman 不，这不起作用。另外，我需要保留那个填充。
你能显示你的完整 SVG 代码，以便我检查
@Aman 这几乎是完整的 SVG。我认为问题出在“边界半径”上。
我的意思是我必须检查一下边界半径有什么问题，这就是我要求 SVG 端的原因

标签： html safari

【解决方案1】：

您必须使用外部 div 并在其上实现 CSS

.svg_icon{
    background: #0046dd;
    display: block;
    border-radius: 50%;
    padding: 9px;
    float: left;
    width: 30px;
    height: 30px;
}
.svg_icon svg{
    color: white;
    width: 30px;
    height: 30px;
}

<div class="svg_icon">
  <svg class="svg-inline--fa fa-bus fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"></path></svg</div>

【讨论】：