圆角在台式机或移动设备的 Safari 中不起作用

Question

初级开发人员在这里。 我目前在 Safari 中遇到圆角问题。 我看到其他人也有这个问题。 圆角适用于 Firefox 和 Chrome，但不适用于 Safari。 它目前影响页面的多个部分。 其中之一的当前代码是：

#portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 35px auto;
  list-style: none;
  text-align: center;
  border-radius: 1rem;
  padding: 2px 15px;
  outline-style: solid;
  outline-color: #F10086;
}

我试过使用“px”和“em”都无济于事。 我曾尝试使用 -webkit-appearance: none;, overflow:hidden，但我似乎在谷歌上找不到任何东西来帮助解决这个问题。 我会附上照片以供参考。 第一张照片是它在 Google Chrome 和 Firefox 中的显示方式（正确方式）。

圆角

这是角落在 Safari 中的显示方式。 无论浏览器如何，它也以这种方式出现在移动设备上。

没有圆角

任何帮助都会很棒。 我希望我已经很好地描述了这一点。

谢谢

Answer 1

这是目前Safari 中的一个错误，希望很快得到修复，其中border-radius不会影响outline 。 有一个解决方法张贴在这里，但它是相当hacky，只应在你真的需要使用outline而不是border​​时使用。