bootstrap 5 在 safari 12–14 中渲染异常是因旧版 webkit 错误解析标准属性，如 flex-wrap 错位、sticky 失效、box-shadow 残留虚线；加 -webkit- 前缀反而加剧问题，因 safari 15+ 已移除对 -webkit-flex 等前缀的支持，仅认标准属性且需目标版本原生支持。
Bootstrap 5 在 Safari（尤其是 12–14）中渲染异常，不是你写错了 CSS，而是旧版 WebKit 对标准属性的解析存在已知缺陷——比如 flex-wrap 错位、position: sticky 失效、box-shadow 残留虚线边框。直接加 -webkit- 前缀多数时候反而让问题更糟。
为什么加 -webkit-flex 这类前缀在 Safari 15+ 里会失效
现代 Safari（iOS 16.4+ / macOS 13.3+）已移除对大量旧前缀的支持，-webkit-flex、-webkit-align-items 等写法会被直接丢弃，甚至触发 CSS 解析中断。它只认标准属性，前提是目标版本已原生实现该特性。
- 查 caniuse.com 确认你要支持的最低 Safari 版本是否原生支持该属性（例如
aspect-ratio从 Safari 15.4 起无需前缀） - 仅对无标准替代的属性加前缀，如
-webkit-line-clamp - 避免混写：
display: -webkit-flex; display: flex;→ 现代 Safari 只取后者，前者纯冗余
flex 布局在 Safari 10–14 中错位怎么修
常见表现：子项不换行、align-items: stretch 不拉伸、min-width: 0 被忽略导致内容撑破容器。这不是 Bootstrap 的 bug，是 Safari 旧版 Flexbox 实现缺陷。
- 对
flex容器显式加align-content: flex-start，可修复 Safari 10.x 的换行错位 - 避免在
flex-wrap: wrap容器中依赖min-width: 0控制换行；改用flex-basis: 0+flex-grow: 1 - 不要用
flex: 1简写——Safari 13.1 对该简写的解析不稳定，拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0%
sticky-top / sticky-bottom 在 iOS Safari 里“粘不住”怎么办
sticky-top 在 iOS Safari 里不吸附，最常见原因是父容器触发了层叠上下文（如 transform、filter）或设了 overflow: hidden/auto，导致吸附作用域错误。
- 检查 computed 样式里
position是否还是sticky；如果不是，往上逐级排查祖先元素的transform、opacity、filter等属性 - 确认导航栏的**直接父元素**没有
overflow: hidden、overflow: auto或overflow: scroll - 对
sticky-bottom，必须显式写position: -webkit-sticky; position: sticky;，不能只依赖 Bootstrap 的 class - 若父容器是
flex容器，确保其align-items不是center或stretch（会干扰 sticky 触发条件）
button:focus 在 Safari 中残留虚线或根本不触发
这不是 Bootstrap 的 bug，而是 Safari 对 outline 的内部状态管理异常：设 outline: none 后焦点仍卡住，键盘导航失灵；不设又出现难看的虚线。
- 用
box-shadow替代视觉outline：button:focus { box-shadow: 0 0 0 2px rgba(0,123,255,0.25); } - 必须配合
:focus:not(:focus-visible)隐藏鼠标/触控操作下的 shadow，但老版 Safari 不支持:focus-visible，所以得兜底：button:focus { outline: 2px solid transparent; } - 动态插入的按钮（如 Vue
mounted后创建）需手动调用element.focus()，否则 Safari 不建立 focus 链路
真正麻烦的不是某一条规则写错，而是 Safari 旧版对 CSS 渲染链的多个环节都有隐性干预——比如 will-change 会悄悄禁用 sticky，transform: scale(1) 会创建层叠上下文，font-family 继承断裂会让行高在 iOS 上突然变大。修一个点容易，但要系统性避开这些坑，得靠持续验证和最小化干预原则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
