android 4.4 webview既不支持display: grid也不支持@supports规则，导致@supports检测完全失效；降级样式必须写在@supports块外且使用兼容语法，如float+box-sizing，并手动对齐布局逻辑。
旧版安卓浏览器（特别是 Android 4.4 及更早的 WebView）根本不解析 display: grid，直接跳过整条规则，布局会塌成一列或完全错位——@supports (display: grid) 在这里毫无意义，必须用更保守的检测方式搭配明确的降级路径。
为什么 @supports (display: grid) 在 Android 4.4 WebView 里失效
Android 4.4 的 WebView 基于 Chromium 30，它既不支持 display: grid，也不支持 @supports 规则本身。也就是说，整个 @supports 块会被浏览器当作无效 CSS 忽略，连带里面的样式都不会加载。你写的 Grid 样式不会生效，但降级样式也得靠它“漏过去”才行——所以降级规则必须写在 @supports 外面，且语法得是它能认的。
- 所有降级样式（如
display: flex或float: left）必须放在@supports块之前或之外 - 别指望
@supports not (display: grid)：这个语法在 Android 4.4 里根本无效，浏览器直接报错并丢弃整条规则 - 真正起作用的是“老浏览器看不懂新语法，就自然走默认分支”这个事实，而不是主动检测
@supports 检测必须加模板约束，否则 Safari 15.6 也会误入 Grid 分支
只写 @supports (display: grid) 会把 iOS Safari 15.6、Safari 10.1 这类“半支持”浏览器放进来。它们识别 display: grid，但不支持 gap、fr 单位或 auto-fit，结果 Grid 渲染失败，子项堆叠或溢出。
- 改用
@supports (display: grid) and (grid-template-columns: 1fr)：同时验证 display 和基础模板语法，能筛掉 Safari ≤10.1、所有 IE、以及大部分 Android 旧 WebView - 别用
@supports (gap: 1rem)：Firefox 63 以前不支持，反而把大量现代浏览器拦在外面 - IE11 完全忽略
@supports块，所以降级样式必须写在块外，且属性值得是 IE 能理解的（比如用margin代替gap）
Flexbox 降级时要重置所有可能干扰的属性
很多项目先写 .container { display: flex }，再用 @supports 覆盖成 display: grid，这在 iOS Safari 15.4 等中间版本里会导致 Flex 规则残留，子项高度/换行异常。
- Flex 降级分支里必须显式重置：
flex-wrap: wrap、flex-basis: auto、align-items: stretch，避免和 Grid 的二维逻辑耦合 - Grid 分支里要覆盖掉 Flex 的 margin：比如
.item { margin: 0 }，否则gap和margin叠加导致间距翻倍 - Android 4.4 WebView 不支持
flex: 1缩写，得拆成-webkit-flex: 1；但更稳妥的是用flex: 0 0 300px+min-width组合
比 Flex 更稳的兜底：用 float + box-sizing: border-box
当目标必须覆盖 Android 4.4 甚至更低版本时，Flexbox 本身也有兼容风险（比如 Android 4.0 WebView 不支持 flex-wrap）。这时候 float 反而更可控。
- 用
@supports not (display: flex)包裹 float 规则，确保只在不支持 flex 的浏览器中启用（Android 4.4 会忽略该规则，但现代浏览器能正确分流） - 所有参与 float 的元素必须加
box-sizing: border-box，否则 padding/border 会让宽度超 100% - 父容器用
::after清除浮动：.grid::after { content: ""; display: table; clear: both; }，避免高度塌陷 - 图片记得设
display: block，否则底部默认有空白间隙
真正麻烦的不是写两套样式，而是 gap、subgrid、auto-fit 这些特性在降级时没有等价替代；@supports 只负责分流，轨道对齐、间隙控制、跨行逻辑都得手动对齐——尤其是父容器用 minmax() 时，float 分支里得硬编码列宽，没法动态响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
