html - Border-radius 在 Safari 和 iPhone 设备上无法正常工作？

Question

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

和野生动物园

. 如何使图标在所有设备和 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;
}

标签： htmlsafari

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