Safari中Flex居中失效因min-height与column组合处理严格，需设min-height:100vh；Firefox网格列宽异常因auto-fit判定保守，应加width:100%；EdgeHTML不支持space-between，需用margin-auto降级；Safari15.4–16.3忽略gap，可用padding模拟或改用row流。
Flex item 在 Safari 里不居中，align-items: center 失效
不是写错了，是 Safari（尤其 iOS 15–16）对 min-height 和 flex-direction: column 的组合处理更严格。父容器若没显式设 height 或 min-height，且子项有 margin 或 padding，Safari 可能跳过居中逻辑。
- 确保父容器有明确高度：用
min-height: 100vh比height: 100%更稳 - 避免在 flex item 上同时用
margin和align-items: center；改用justify-content: center配合flex-direction: column - 遇到文字截断+居中时，加
overflow: hidden到 item，防止 Safari 因渲染测量误差偏移
Grid 布局在 Firefox 中列宽计算异常，grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 出现空隙
Firefox 对 auto-fit + minmax() 的最小尺寸判定比 Chrome/Edge 更保守，尤其当容器有 padding 或父级用了 box-sizing: border-box 但子级没同步时，会误判可用空间不足，导致列数减少、留白增大。
- 给 grid 容器加
width: 100%（哪怕父级已撑满），Firefox 需要这个“锚点”来重算 - 把
minmax(200px, 1fr)改成minmax(200px, 1fr)并确保所有直接子项没设固定width—— Firefox 会优先按固定宽分配，忽略1fr - 如果内容是图片，记得加
img { max-width: 100%; height: auto; }，否则 Firefox 可能按原始尺寸参与网格计算
justify-content: space-between 在旧版 Edge（EdgeHTML）里完全不生效
EdgeHTML 17–18 不支持 space-between 用于单行 flex 容器（即使只有两个子项）。它只识别 space-around，且对 flex-wrap: wrap 下的多行表现混乱。
- 降级方案：用
margin-left: auto给最后一个子项，或给倒数第二个加margin-right: auto - 别依赖
space-between做关键布局；如果是表单按钮组，直接用display: table+table-layout: fixed更可靠 - 检测时注意：
@supports (justify-content: space-between)在 EdgeHTML 里返回 true，但实际不执行 —— 必须靠 JS 特性检测或 UA 判断
Grid gap 在 Safari 15.4–16.3 中被忽略，尤其配合 grid-auto-flow: column
Safari 这几个版本对 gap 的解析存在路径分支 bug：当 grid-template-areas 未定义、且使用 grid-auto-flow: column 时，gap 值会被静默丢弃，不报错也不渲染。
立即学习“前端免费学习笔记（深入）”；
- 临时修复：用
padding模拟 gap，比如给每个 grid item 设padding: 0 8px，再给容器设margin: 0 -8px - 更稳妥的是换回
grid-auto-flow: row，配合grid-template-columns显式声明列数 —— Safari 对 row 流的 gap 支持完整 - 如果必须用 column 流，加
grid-template-rows: auto（哪怕空着），能触发 Safari 正确读取 gap
跨浏览器对齐最麻烦的不是语法不支持，而是同一段 CSS 在不同引擎里触发了不同的内部测量路径 —— 有时候加一行 width: 100% 或删一个 margin，就绕过了整个渲染分歧点。
