Safari 15.6 中 grid-template-areas 含连字符（如"header-nav"）会静默失效，导致 display: grid 回退为 block，应改用下划线或纯字母命名，并避免 subgrid；Edge 18 不支持 gap，需用 margin 模拟；Firefox 120 前不支持 :has()；IE 11 和 iOS 9.3 不支持 CSS 变量动态更新，需静态替换或 JS 控制；clip-path 等细微差异需真机多版本测试。
为什么 display: grid 在 Safari 15.6 里不生效
不是写错了，是 Safari 15.6 对 grid-template-areas 的解析存在已知 bug：当区域名含连字符（如 "header-nav"）时会静默失败。Chrome 和 Firefox 没这问题，导致布局在 Safari 里直接回退成 display: block。
- 改用下划线命名：
"header_nav"或纯字母"headernav" - 避免嵌套
grid+subgrid组合——Safari 16.4 才开始部分支持subgrid，旧版一律忽略 - 用
@supports (display: grid)包裹关键规则，但别依赖@supports (grid-template-areas: ...)，它在 Safari 里返回true却不执行
Flexbox 的 gap 在 Edge 18 及更早版本完全失效
gap 是 Flexbox 和 Grid 的共用属性，但 Edge 18（基于 EdgeHTML）压根没实现它。用户看到的不是“间隙变小”，而是子元素紧贴在一起，且无任何报错。
- 对 Flex 容器，用
margin模拟：.item:not(:last-child) { margin-right: 12px; }（注意响应式断点需同步重置） - 不推荐
padding+negative margin父容器方案——容易和overflow、border-box冲突 - 如果必须用
gap，加降级：.container { display: flex; gap: 12px; } .container { margin: -6px; } .item { padding: 6px; }，但仅适用于固定尺寸间隙
伪类 :has() 在 Firefox 120 之前不可用
:has() 是强大但危险的实验性选择器。Firefox 直到 120 版本才默认启用，而 Chrome 105+、Safari 15.4+ 已支持。一旦在 CSS 中写了 div:has(> p)，旧版 Firefox 会整条规则丢弃（不是忽略选择器，是跳过整条声明块）。
- 检查 Can I Use 数据时，盯住「Default in browser」列，不是「Supported」列
- 用 PostCSS 插件
postcss-has-pseudo转译简单场景（如:has(+ li)→ JavaScript 补充 class），但复杂嵌套无法自动转译 - 优先用 JS 判断后加 class：
if (el.querySelector('p')) el.classList.add('has-p')，再写.has-p规则，可控性远高于赌浏览器支持
自定义属性（CSS 变量）在 IE 11 和 iOS 9.3 里彻底不识别
IE 11 完全无视 --main-color: #333，iOS 9.3 虽支持变量声明，但不支持 var(--main-color) 在 @media 内动态更新值。结果是主题色卡死在初始值，或媒体查询失效。
立即学习“前端免费学习笔记（深入）”；
- 用
postcss-custom-properties静态替换变量（适合设计系统中固定值），但无法处理运行时 JS 修改变量的场景 - 对需要动态换肤的项目，放弃纯 CSS 方案，改用
document.documentElement.style.setProperty()+ 后备色：:root { --text: #333; color: #333; color: var(--text); } - 别在
@keyframes里用变量——iOS 10.3 修复了该 bug，但 iOS 10.0–10.2 会崩溃渲染线程
clip-path 在 Chrome 里看着正常，但 Safari 会因小数精度差异导致边缘 1px 锯齿；这类问题不会报错，也不会触发 @supports 检测，只能靠真机+多版本覆盖测试抓出来。 
