旧版浏览器直接跳过@container规则，不报错也不降级；兜底样式须写在普通CSS中；container-query-polyfill最可靠，但需显式声明container-name、手动init、仅支持inline-size。
@container 在老浏览器里不是“不生效”，而是整条规则被 CSS 解析器直接跳过——连语法错误都不会报，调试时容易误判为写法错误。
老浏览器根本无视 @container 语法
Chrome 109、Firefox 119、Safari 16.4 之前的所有版本，遇到 @container 都会静默丢弃整条规则块。这意味着：
-
@container (min-width: 300px) { .card { font-size: 1rem; } }在 Safari 16.3 下完全不执行，.card不会获得任何样式变化 - 你写的兜底样式如果只包在
@container里，老浏览器根本看不到 - 不存在“部分生效”：没有降级逻辑自动触发，也没有 fallback 回退机制
兜底样式必须写在普通 CSS 规则中
真正能被所有浏览器读到的降级样式，只能是没被任何 @at-rule 包裹的纯 CSS 声明：
- ✅ 正确：
.card { font-size: 0.875rem; } /* 所有浏览器都执行 */ - ❌ 错误：
@supports (container-type: inline-size) { .card { font-size: 0.875rem; } }—— Safari 15.6 根本不解析@supports里的这个语法，整块被跳过 -
@supports只适合启用增强功能，不能当兼容开关用
JS polyfill 必须满足三个硬性前提
container-query-polyfill 是目前最轻量可靠的方案，但它不是“开箱即用”：
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明
container-name，例如<div style="container-name: card;">；仅靠container-type: inline-size的匿名容器不支持 - 必须手动调用
init()，且要在所有<link>和<style>加载完成后执行，否则提取不到@container规则 - 只支持
inline-size类型，block-size或size会被忽略 - 内部已做 32ms 节流，但页面若有超过 20 个频繁 resize 的容器，仍可能卡顿
自己实现 fallback 时最容易踩的坑
别以为加个 ResizeObserver 就完事了：
- IE 完全不支持
ResizeObserver；Edge 16–18 有严重 bug（嵌套容器返回contentRect.inlineSize === 0） - 旧版
resize-observer-polyfill返回的是width，但容器查询语义要求的是 content box 宽度（受padding和box-sizing影响） - IE11 只能退到
scroll+offsetWidth轮询（每 200ms 检查一次），但无法响应transform: scale()等缩放变化 - polyfill 不处理图片加载、字体就绪或 JS 动态插入内容导致的尺寸抖动——这点常被忽略
真实设备上务必验证临界点：比如容器设了 padding: 16px 和 box-sizing: border-box，那 min-width: 320px 实际对应的是样式宽度 352px。
