旧版 edge（≤18）完全不支持 clamp() 和 minmax()，整条声明被静默忽略，必须手动提供层叠回退（如先写 font-size: 1.5rem 再覆盖 clamp()）或 js 检测注入 .no-clamp 类降级；scss 无法编译时计算或降级，@supports 检测亦不可靠。
旧版 Edge（≤18）不支持 clamp() 和 minmax()，且无法通过 SCSS 编译时降级 —— 必须手动提供层叠回退或运行时检测。
旧版 Edge 对 clamp() 的兼容性表现
Edge 18 及更早版本（基于 EdgeHTML 引擎）完全忽略 clamp() 声明，既不报错也不 fallback。它不会像现代浏览器那样尝试解析，而是直接跳过整条声明。
- 不能依赖 SCSS
@mixin自动生成媒体查询替代方案 —— SCSS 没有视口单位计算能力，2.5vw在编译期无法转为具体像素值 - 必须显式写 fallback：先声明静态值（如
font-size: 1.5rem），再覆盖clamp()，靠 CSS 层叠顺序生效 - 若同时用
calc()+min()/max()模拟clamp()，Edge 18 也不支持min()/max()（它们是 CSS Values 4 级特性，Edge 18 仅部分支持 Values 3）
旧版 Edge 中 minmax() 的实际行为
minmax() 在 Edge 18 中仅在极少数 Grid 场景下被部分识别（如 minmax(200px, 1fr)），但多数情况静默失效：轨道不收缩、auto-fit 退化为 auto-fill、列数固定为 1。
飞书语音消息发送器。基于 Edge TTS，一键将文字转为语音发送到飞书。 使用场景： - 发送语音通知/提醒到飞书 - 文字转语音自动播报 触发词：飞书语音、语音发送、tts、文字转语音
-
@supports (grid-template-columns: minmax(0, 1fr))在 Edge 18 中返回false，可用于隔离降级规则 - 不要用
minmax(calc(100% - 20px), 1fr)—— Edge 18 解析calc()内嵌表达式会直接丢弃整个minmax() - 安全降级方式：对 Edge 18 单独写
grid-template-columns: repeat(3, 1fr)或改用 Flex 布局
如何精准命中旧版 Edge 并注入降级样式
不能只靠 @supports (display: grid) 或 @supports (font-size: clamp(...)) —— Edge 18 支持 display: grid，但不支持 clamp()；而 clamp() 检测本身就会被忽略，导致规则块整体不执行。
- 推荐用 JavaScript 检测：
!window.CSS || !CSS.supports('font-size', 'clamp(1px, 1px, 1px)')，然后动态加 class（如.no-clamp） - CSS 中用
.no-clamp .title { font-size: 1.5rem; }覆盖，比纯 CSS@supports更可靠 - 若禁用 JS，可用 IE/Edge 专属条件注释（仅限旧版 Trident/EdgeHTML）：
<!--[if IE]><link rel="stylesheet" href="legacy.css"><![endif]-->，但需服务器支持条件注释解析
真正容易被忽略的点
很多人以为只要写了 clamp() 就自动“响应”，其实旧版 Edge 下连最基础的层叠 fallback 都可能失效 —— 如果你把 clamp() 写在 reset.css 之后、通用样式之前，fallback 值反而会被后面更宽泛的选择器覆盖掉。
另外，minmax() 失效时，Grid 子项的 min-width: auto 会强制撑开容器，此时加 min-width: 0 也救不了 —— 因为整个轨道定义都没被识别，属性根本没进渲染树。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
