Bootstrap 4按钮在Safari中出现虚线边框怎么办
直接去掉 outline 不行，Safari 会残留渲染痕迹；真正有效的做法是用视觉反馈替代 outline，同时保留焦点可访问性。
- 别写
outline: 0或outline: none—— Safari（尤其是 iOS 15.4 之前）可能卡住焦点状态，导致后续键盘导航失灵或样式残留 - 改用
box-shadow模拟聚焦效果，例如：button:focus { box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); } - 必须配合
:focus:not(:focus-visible)逻辑：对鼠标/触控操作隐藏该 shadow，只对键盘用户显示，但要注意老版 Safari 不支持:focus-visible，所以得双保险 - 如果项目需兼容 iOS 14 或安卓 WebView，建议额外加一条兜底：
button:focus { outline: 2px solid transparent; }——它不干扰视觉，但能重置 Safari 的内部 focus 状态
为什么 type="button" 在 Safari 里会让按钮图标错位
这不是 Bootstrap 本身的问题，而是 Safari 对 type="button" 的默认 button 样式干预过强，尤其当按钮内嵌 SVG 或伪元素图标时，会触发非预期的 baseline 对齐和 padding 行为。
- 移除
type="button"属性是最轻量解法（<button class="btn"></button>合法且语义正确），多数场景下无副作用 - 若必须保留
type（如表单提交控制），可强制重置 Safari 的 button 默认样式：button[type="button"] { -webkit-appearance: none; appearance: none; } - 注意：iOS Safari 对
-webkit-appearance: none的处理在某些版本中会丢失圆角或背景渐变，建议搭配border-radius和background显式声明
button:focus 在 Safari 中不触发或延迟触发的排查点
Safari 的 focus 事件行为比 Chrome 更保守，尤其在触摸设备上，容易因事件冒泡、合成层缺失或 tabindex 缺失而失效。
- 确保按钮有
tabindex="0"—— 这是 popover、tooltip 等组件在 Safari 中能正常 focus 触发的前提（Bootstrap 4 的 data-trigger="focus" 依赖它） - 避免父容器设
pointer-events: none或contain: paint，Safari 可能跳过子元素的 focus 捕获 - 检查是否用了
transform或will-change提升图层，部分 Safari 版本中会导致 focus 状态未同步到渲染树 - 动态插入的按钮（如 AJAX 加载、Vue mounted 后创建）需手动调用
element.focus()或触发一次click以激活 focus 链路
统一 Webkit 属性时，哪些 CSS 值在 Safari 中必须显式声明
Bootstrap 4 的 CSS 大量依赖标准属性，但 Safari（尤其旧版）对 Webkit 前缀的解析不一致，仅靠 autoprefixer 不够。
立即学习“前端免费学习笔记（深入）”；
-
user-select必须补-webkit-user-select，否则 Safari 可能意外选中文本（比如按钮文字被双击高亮） -
appearance相关样式（如button、input）务必加-webkit-appearance，否则圆角、阴影、字体平滑可能异常 -
text-rendering: optimizeLegibility在 Safari 中效果不稳定，建议改用-webkit-font-smoothing: antialiased+backface-visibility: hidden组合提升文字清晰度 - 不要依赖
transition: all，Safari 对box-shadow和transform的过渡触发时机与 Chrome 不同，应拆成明确属性：transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
