order 属性在 ios 9.3 及更早 safari 和所有 ie 版本（含 ie11）中完全不支持，既无解析也无降级行为；其最低兼容版本为 safari 10+、chrome 29+、firefox 20+。
order 属性在旧版 Safari 和 IE 中根本不起作用
直接说结论：order 是 Flexbox 的核心排序属性，但 iOS 9.3 及更早 Safari、所有 IE 版本（包括 IE11）完全不支持它。不是“表现不稳定”，是压根没解析——你写 order: 2，它们当不存在。
常见错误现象：开发时 Chrome 正常，一测真机就顺序全乱；或者用 Autoprefixer 自动加前缀，结果发现加了 -webkit-order 也没用——因为老 Safari 根本没实现这个前缀属性。
- 真正能用
order的最低兼容底线是：Safari 10+（macOS 10.12+/iOS 10+）、Chrome 29+、Firefox 20+ - IE10/11 支持
display: flex，但order属于“部分实现”，实际行为等同于未声明 - Autoprefixer 对
order加的-webkit-前缀，在 Safari ≤9 中无效，别指望它救场
替代方案：用 flex-direction + order 混合控制，但得绕开 IE
如果必须支持 IE11 或老 Safari，order 就不能作为主逻辑。可行路径是：用 flex-direction: row-reverse 或 column-reverse 配合 DOM 顺序调整，把“视觉倒序”变成“结构顺排”。
使用场景：比如移动端需要把操作按钮提到列表顶部，但又不想改 HTML 结构——这时可对容器设 flex-direction: column-reverse，再让按钮本身 order: 1（仅对新浏览器生效），而老浏览器只靠 flex-direction 实现基础翻转。
- 注意
flex-direction: reverse本身兼容性好（IE10+、Safari 6.1+ 都支持） -
order在新浏览器中仍可叠加使用，形成“渐进增强”：老浏览器看到翻转，新浏览器看到精准重排 - 不要在同一个元素上同时依赖
order和flex-direction: reverse去做精细排序——行为在不同引擎下容易冲突
测试 order 兼容性的最小验证代码
别信 Can I Use 上的表格，现场验证最可靠。以下 HTML 片段可快速判断当前环境是否真正支持 order：
<div style="display: flex"> <div style="order: 2">A</div> <div style="order: 1">B</div> <div style="order: 3">C</div> </div>
预期渲染应为 B → A → C。如果显示 A → B → C，说明 order 未生效。这个测试比查 UA 字符串更准，因为有些安卓 WebView 声称支持 Flexbox，但 order 解析有 bug。
- 在 iOS 9.2 真机上运行，会看到 A→B→C（不支持）
- 在 Chrome 120 中运行，正确显示 B→A→C
- 注意：某些 Android 4.x 系统 WebView 会把
order当普通属性忽略，也不报错
服务端或构建时降级：用 class 切换 DOM 顺序
当兼容性要求卡死（比如必须跑在医院老旧 Win7 + IE11 终端上），最稳的办法是放弃 CSS 排序，改用 JS 或服务端逻辑调整 DOM 顺序，再用 class 控制样式。
例如后端模板中判断 UA 包含 MSIE 或 Trident，就输出已重排的 HTML；构建时也可用 PostHTML 插件预处理。
- JS 降级只需几行：
container.prepend(button)或Array.from(items).reverse().forEach(el => container.append(el)) - 避免在
DOMContentLoaded后再重排——会造成页面闪动，尤其内容多时 - 如果用 React/Vue，别在 render 里硬写
order，应在组件逻辑中根据环境变量决定 children 渲染顺序
order 的坑不在写法，而在你以为它“差不多能用”的那一瞬间。老浏览器不报错、不警告，只是安静地按 DOM 顺序渲染——这种静默失效最难 debug。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
