bootstrap 5 在 safari 12–14 中显示不一致主因是 webkit 引擎错误解析属性：flex 换行错位、sticky 失效、backdrop-filter 不模糊、focus 虚线残留；加 -webkit- 前缀常适得其反，需针对性修复而非盲目补前缀。
Bootstrap 5 的 CSS 在 Safari（尤其是 12–14）中“显示不一致”，不是样式漏加载，而是某些属性被 WebKit 引擎错误解析或静默忽略——比如 flex 换行错位、position: sticky 失效、backdrop-filter 不模糊、button:focus 虚线残留。直接加 -webkit- 前缀多数时候反而让问题更糟。
flex 布局在 Safari 12–14 中错位或撑破容器
常见表现：flex-wrap: wrap 下子项不换行、align-items: stretch 不拉伸、min-width: 0 被忽略导致文字撑开卡片。
- 给
flex容器显式加align-content: flex-start，可修复 Safari 10–13 的换行错位 - 避免依赖
min-width: 0控制换行；改用flex-basis: 0+flex-grow: 1 - 禁用
flex: 1简写——Safari 13.1 对它的解析不稳定，拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0% - 若父容器是
display: flex，且子项是.navbar-nav这类弹性导航，需额外设align-items: flex-start，否则 Safari 不触发正确对齐上下文
position: sticky 在 iOS/Safari 中“粘不住”
不是不支持，是 WebKit 对 bottom 方向支持极差，且极易被父级样式退化为 static。
- 必须按顺序声明：
position: -webkit-sticky;在前，position: sticky;在后；顺序反了 Safari 直接忽略 -
overflow-y: hidden是最大陷阱——哪怕只加在<main></main>或.container上，sticky-bottom就彻底失效 - 父容器含
transform、filter或will-change时，sticky 行为会退化；需移除或改用translateZ(0)替代（但注意这又可能影响backdrop-filter） - 内容高度不足一屏时，
sticky-bottom不会自动沉底——它只在滚动时吸附，不是fixed语义
backdrop-filter 毛玻璃在 Safari 中不生效或卡顿
看起来“糊”，其实大概率是毛玻璃根本没渲染出来，或是被 Safari 渲染管线阻断。
- 必须同时写：
backdrop-filter: blur(12px)和-webkit-backdrop-filter: blur(12px)；Safari 15.4 及更早版本完全不认无前缀版本 -
background-color必须带 alpha，如rgba(255, 255, 255, 0.1)；纯transparent或rgba(0,0,0,0)会让 backdrop 失效 - Bootstrap 5 默认给
.navbar加了background-image: linear-gradient(...)，它会盖掉透明背景——必须加background-image: none !important - 检查祖先元素是否含
transform或will-change: transform；Safari 某些版本会因此禁用 backdrop 实时采样
data-bs-* 属性和 CSS 变量在旧 Safari 中静默失效
不是报错，是“安静地错”：模态框打不开、下拉菜单点不动、按钮颜色变透明——控制台零提示。
-
data-bs-toggle、data-bs-target在 Safari 11 及更早版本中 JS 根本读不到；需确认你最低支持版本是 Safari 12+，否则必须补Element.prototype.matches和CustomEventpolyfill - 所有用到
var(--bs-primary)的地方，必须前置硬编码值：color: #0d6efd; color: var(--bs-primary);；Safari 11.1 之前会直接忽略var() - 避免在关键样式中单独依赖
calc(var(--bs-gutter-x) * .5)；旧 Safari 不支持var()在calc()内部的计算 - 如果用了
data-bs-theme="dark"，旧 Safari 会回退到浅色模式——这不是 bug，是 CSS 变量机制自带降级，但需确保 fallback 颜色可用
最易被忽略的一点：很多“不一致”不是来自 Bootstrap 本身，而是你项目里混用了 float / inline-block 和 Bootstrap 5 的 flex 栅格；.row 是 display: flex，但老代码里的 float: left 子项会脱离文档流，导致高度塌陷、列宽错乱——这种冲突在 Safari 中尤其明显，因为它的 flex 实现比 Chrome 更严格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
