Bootstrap 5按钮聚焦轮廓在Safari中不可见的解决咨询

算力阿峰

2026-7-3

Safari 15.6中Bootstrap 5聚焦环不显示的解决办法

方案1：针对Safari的:focus-visible兼容修复

Bootstrap 5的focus-ring组件依赖:focus-visible伪类，而Safari 15.6对该伪类的支持存在局限性。可以通过以下自定义CSS覆盖原有样式，专门针对Safari做兼容：

/* 适配Safari 15.x的聚焦环样式 */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .focus-ring:focus:not(:focus-visible) {
      outline: none;
    }
    .focus-ring:focus-visible {
      outline: 0.25rem solid rgba(13, 110, 253, 0.5);
      outline-offset: 0.25rem;
      box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
  }
}

这段代码通过媒体查询和特性检测精准定位Safari浏览器，确保键盘导航触发聚焦时，能显示与Bootstrap默认样式一致的聚焦环。

方案2：降级使用:focus伪类（快速兼容）

如果不需要区分键盘/鼠标触发的聚焦，可以直接强制所有聚焦状态显示环，牺牲部分语义化换兼容性：

.focus-ring:focus {
  outline: 0.25rem solid rgba(13, 110, 253, 0.5);
  outline-offset: 0.25rem;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

注意：此方案会在点击按钮时也显示聚焦环，适合需要快速解决问题的场景。