旧版浏览器完全忽略@container规则，无语法错误；无纯CSS polyfill，JS方案需显式容器声明和运行时监听；@supports仅检测语法支持，不能作兼容开关；兜底样式须写在普通CSS中；container-query-polyfill最轻量可靠，但要求container-name显式声明、手动init、仅支持inline-size。
旧版浏览器根本不解析 @container，不是“不生效”，而是整条规则被跳过——连语法错误都不会报。没有纯 CSS 的 polyfill，所有方案都得靠 JS 模拟，且必须配合显式容器声明和运行时监听。
为什么不能用 @supports 检测后直接 fallback
@supports (container-type: inline-size) 只能判断语法支持，但 Safari 16.4+、Chrome 110+、Firefox 119+ 才算稳定可用；更早版本即使通过检测，@container 块仍被忽略。你写的降级样式如果只包裹在 @supports 里，旧浏览器根本看不到，等于没写。
- 真正兼容的兜底必须写在普通 CSS 规则中（无任何 at-rule 包裹）
-
@supports只适合启用增强逻辑，不能当作兼容性开关 - 测试时务必关掉 DevTools 的“禁用 CSS”功能——它会干扰容器查询的初始匹配
container-query-polyfill 是目前最轻量可靠的方案
它不改写你的 CSS 语法，而是提取 @container 规则，监听容器尺寸变化，再动态加 class 到元素上，由普通类选择器触发样式。但它有硬性前提：
- 容器必须显式带
container-name属性（如style="container-name: card;"），不支持仅靠container-type的匿名容器 - 必须手动调用
init()，且要在所有<link>和<style>加载完成后执行 - 只支持
inline-size类型，block-size和size会被忽略 - 内部已做 32ms 节流，但若页面有超过 20 个频繁 resize 的容器，仍可能卡顿
自己实现简易 fallback 时绕不开的坑
别直接用 ResizeObserver —— IE 完全不支持，Edge 16–18 有严重 bug（嵌套容器返回 contentRect.inlineSize === 0），即使引入 resize-observer-polyfill，它也不保证与原生行为一致。
立即学习“前端免费学习笔记（深入）”；
- IE11 必须退到
scroll+offsetWidth轮询（每 200ms check 一次），但无法响应transform: scale()等缩放变化 - 不要依赖
contentRect.inlineSize字段：旧 polyfill 返回的是width，而容器查询语义要求的是 content box 宽度（受padding和box-sizing影响） - 真实设备上必须验证临界点：比如容器设了
padding: 16px和box-sizing: border-box，那min-width: 320px实际对应的是样式width: 352px
最容易被忽略的一点：polyfill 不会自动处理容器内图片加载、字体就绪或 JS 动态插入内容导致的尺寸抖动。组件挂载时若容器宽高未稳定，初始 class 就可能加错——得自己在 img.onload 或 document.fonts.load 后手动触发重计算。
