inline-flex在IE9及更早版本中完全不被支持，因其属于CSS3 Flexbox规范，旧版Trident引擎直接忽略该声明；旧版Safari/Android WebView支持有限且行为不一致，需手动启用-webkit-inline-box并注意属性兼容性；@supports检测在Android 4.4及更早版本中失效，降级需依赖外部样式或JS检测。
inline-flex在IE9及更早版本里根本不存在
因为display: inline-flex是CSS3 Flexbox规范的一部分，IE9及更早版本的渲染引擎（Trident）压根不识别这个值。浏览器遇到无法解析的display声明时，会直接忽略整条规则，退回到元素的默认display值——对div是block，对span是inline，不是“主动回退”，而是“根本没加载这条样式”。
旧版Safari/Android WebView对inline-flex的支持极有限
即使在支持display: -webkit-inline-box的环境（如Safari 6.1、Android 4.3），行为也和现代inline-flex不一致：
-
-webkit-inline-box不支持flex-wrap，多子项必然单行溢出 -
align-items类属性映射到-webkit-box-align后，在Android 4.0上常出现垂直偏移（内核bug，加前缀无效） - 子元素若设了
width或float，会直接压制-webkit-box-flex伸缩逻辑 - Autoprefixer v10+默认不生成
-webkit-inline-box，需手动启用flexbox: '2009'模式，且它不会补align-self等属性
@supports检测在老安卓里完全失效
Android 4.4 WebView（Chromium 30）既不支持display: inline-flex，也不支持@supports语法本身。你写：
@supports (display: inline-flex) {
.container { display: inline-flex; }
}结果是：整个@supports块被浏览器当作无效CSS丢弃，连降级样式都拿不到执行机会。真正能用的兜底方式只有：
立即学习“前端免费学习笔记（深入）”；
- 把
display: inline-block或float: left写在@supports块外，确保老浏览器至少能读到 - 用
@supports not (display: flex)包裹降级规则（IE10+、现代浏览器支持该语法） - 对Android 4.3及更早，必须手动写
display: -webkit-inline-box，且顺序不能错：display: -webkit-inline-box; display: inline-flex;
inline-flex降级时最易忽略的细节
很多人以为加个display: inline-block就完事，但实际要处理三件事：
- 父容器需设
font-size: 0消除inline-block间的空白间隙，子元素再重置font-size - 子元素宽度要用
calc()精确控制，比如width: calc(33.333% - 2px)，否则IE的小数计算误差会导致意外换行 - 必须显式清除浮动或设置
vertical-align: top，否则inline-block元素基线对齐会引发高度错乱
旧浏览器不报错，只是静默失效——问题往往出现在测试覆盖不到的机型上，比如某款Android 4.2定制ROM，连-webkit-inline-box都不认，只能靠JS检测后切换DOM结构。
