display: box 和 -ms-flexbox 是旧版弹性布局实现，行为与现代 flex 不一致，需手动处理兼容性且 autoprefixer 支持有限，建议优先降级为 float/table 布局或用 @supports 隔离现代样式。
display: box 在 Chrome 21–28 和 Safari 6.1–7 中能用，但行为和现代 flex 不一致
老浏览器里写的 display: box 看似能“跑起来”，其实只是早期草案实现，连主轴方向默认值都不同：现代 display: flex 默认 flex-direction: row，而 display: box 默认是 box-orient: horizontal，但部分 Android 4.3 WebView 会当 vertical 处理。
常见错误现象：display: box 下 box-pack: center 在 iOS 7 Safari 里不居中，或者子元素宽度计算完全错乱。
- 只在明确支持
display: -webkit-box的环境（如 Chrome ≤28、Safari ≤7）中启用，别无脑加前缀 -
-webkit-box-orient必须显式设为horizontal或vertical，不能依赖默认值 - 避免混用：不要同时写
display: -webkit-box和display: flex，旧引擎会忽略后者，新引擎可能因 CSS 优先级误判
IE10–11 用 display: -ms-flexbox，但 flex-wrap 不支持
IE10/11 的 display: -ms-flexbox 是微软基于旧草案的实现，语法接近 display: box，但更接近现代标准——只是漏掉了关键特性。
典型踩坑：用 -ms-flex-wrap: wrap 想让导航栏折行，结果完全无效，IE 直接忽略该声明；又或者 -ms-flex-align 对应的是现代的 align-items，但 IE10 不支持 align-content，写了也白写。
- IE10 必须用
-ms-flex-pack（对应justify-content），不是-webkit-box-pack - IE11 支持部分新语法，但要用
display: -ms-flexbox才触发旧模式；若写display: flex，IE11 会尝试按新标准解析，反而出错 - 所有
-ms-属性必须放在display: -ms-flexbox声明之后，否则被跳过
autoprefixer 无法自动补全 display: box 的全部等价属性
现在很多人依赖 autoprefixer 处理兼容性，但它对 display: box 系列的支持非常有限：能加 -webkit-box，但不会帮你把 justify-content: center 转成 -webkit-box-pack: center，更不会处理 flex-grow 到 -webkit-box-flex: 1 的映射。
错误现象：开了 autoprefixer + last 2 versions，样式在 Chrome 25 里依然错位，因为工具根本没生成 -webkit-box-flex 这类声明。
- autoprefixer 默认不启用
display: box补全，需手动开启flexbox: 'no-2009'或'2009'选项 -
flexbox: '2009'模式下，它会把flex: 1转成-webkit-box-flex: 1，但不会转align-self—— 因为老草案压根没这概念 - 一旦用了
display: box，就别指望 autoprefixer 覆盖全部场景，得手写 fallback
真正需要兼容 Android 4.3 或 iOS 7 时，优先降级为 float / inline-block 布局
硬扛 display: box 和 -ms-flexbox 的成本远高于预期：要维护三套 flex 声明、反复测试各端对 box-flex 的解析差异、处理 Safari 6.1 的 -webkit-box-ordinal-group bug……最后发现，这些设备用户本身交互意愿低，页面简单点反而更稳。
真实使用场景：后台管理页要求兼容 IE10+ 和 iOS 7，但核心操作都在桌面端完成；移动端只是查看状态，不需要复杂弹性布局。
- 用
@supports (display: flex)包裹现代 flex 样式，老浏览器自动跳过 - 对老浏览器单独写一层
.legacy-grid { display: table; }或float: left规则，比折腾前缀更可控 - Android 4.3 的 WebView 内核是 WebKit 534，连
-webkit-box-orient都有渲染 bug，这时候 flex 就不该是首选方案
老浏览器的 flex 兼容不是“加几个前缀就能跑”，而是要在功能、维护成本和实际用户路径之间做取舍。最麻烦的从来不是写法，是验证——同一段 -webkit-box-flex 在 iOS 7.0 和 7.1 上表现可能完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
