我怎样才能绕过这个 Safari 大纲错误？答案

【问题标题】：How can I get around this Safari outline bug?我怎样才能绕过这个 Safari 大纲错误？
【发布时间】：2021-01-12 18:04:58
【问题描述】：

使用 Safari 时，在 CSS 中设置轮廓会导致轮廓动态变化的可选元素出现问题。一些轮廓被遗留在之前选择的元素上：

.box {
  outline: 1px solid black;
}
.box.selected {
  outline: 5px solid blue;
}

这是一个演示问题的 CodeSandbox。为了重现，它必须在 Safari 上运行：https://codesandbox.io/s/nostalgic-shockley-luu3m?file=/src/App.js&resolutionWidth=320&resolutionHeight=675

有没有人遇到过这个问题并能够解决它？

【问题讨论】：

标签： css safari outline

【解决方案1】：

这就是它在 safari 浏览器中的工作原理，但您可以尝试将 .box 的样式从 outline 更改为 border

.box {
  height: 75px;
  width: 100px;

  border: 2px solid black;

  margin: 0px 5px;
  background: red;
}

.box.selected {
  outline: 5px solid blue;
}

【讨论】：