IE10必须用display: -ms-flexbox替代display: flex，且需配套-ms-flex-pack、-ms-flex-align等旧属性；flex缩写无效，须拆解为-ms-flex-positive/-negative/-preferred-size；兜底推荐display: table。
IE10 不支持 display: flex，只认 display: -ms-flexbox 这套旧语法——这不是加个前缀就能跑通的事，整套属性名、取值规则、甚至计算逻辑都和标准版不兼容。硬套现代写法，结果就是布局完全错位，而且控制台不报错，排查起来特别隐蔽。
IE10 必须用 -ms-flexbox 替代 display: flex
不能只写 display: flex 再加个 display: -ms-flexbox 就完事。IE10 会按层叠顺序取后者，但其他浏览器可能因解析顺序混乱而失效。稳妥做法是两套并存，且 -ms- 版本必须写在前面：
-
display: -ms-flexbox是 IE10 唯一能触发 Flex 上下文的声明，漏掉它，整个容器就退化成普通块级元素 -
display: flex要紧跟着写在后面，供现代浏览器使用；顺序反了，IE10 可能忽略掉前缀版本 - 别混用
display: -ms-flexbox和display: box（老 WebKit/Firefox 语法），IE10 根本不识别box系列属性
justify-content 和 align-items 在 IE10 中对应哪些属性
IE10 没有 justify-content 和 align-items，得分别换成 -ms-flex-pack 和 -ms-flex-align，而且可选值更少、拼写也不同：
-
-ms-flex-pack: start≈justify-content: flex-start（别写flex-start，IE10 不认识） -
-ms-flex-pack: justify≈justify-content: space-between（IE10 没有space-around） -
-ms-flex-align: center≈align-items: center（stretch值虽存在，但在某些嵌套下表现不稳定） - 别写
-ms-flex-align: flex-start或-ms-flex-pack: flex-end——这些值 IE10 直接丢弃，不会 fallback，而是按默认start渲染，容易误判
flex 缩写在 IE10 中根本不可用，必须拆解并加前缀
IE10 完全忽略 flex: 1、flex: 0 1 auto 这类缩写，哪怕加了 -ms-flex: 1，它也只认单值（即 -ms-flex: 1 ≈ flex: 1 1 0%），三值写法会被当成无效声明丢弃：
- 要等分剩余空间，必须同时写：
flex: 1 1 0%+-ms-flex: 1 - 要固定宽度不伸缩，写：
flex: 0 0 200px+-ms-flex: 0 0 200px（注意：IE10 支持三值-ms-flex，但仅限于数字/百分比/像素，不认auto或content） - 漏掉
-ms-flex-preferred-size（对应flex-basis）会导致 IE10 按0px计算，项目直接塌陷 - 所有涉及
flex-basis的场景，建议统一用px或%，避开auto—— IE10 对它的解析极不稳定
当 -ms-flexbox 仍出问题时，降级用 display: table 更可靠
有些场景，比如多层嵌套 + flex-wrap + 百分比子项，即使补全所有 -ms- 属性，在 IE10 里依然会错位或塌陷。这时候别硬调，改用 display: table 是经过大量项目验证的兜底方案：
- 父容器设
display: table; width: 100%，子项设display: table-cell; vertical-align: top - 等宽三栏就写
width: 33.333%，配合box-sizing: border-box防止 padding/border 溢出 - 这个方案 IE8+ 全兼容，性能比 Flex 还高，唯一限制是不支持换行（
flex-wrap）——如果业务真强依赖折行，那只能重构 DOM 结构或用 JS 动态判断 - 注意兜底样式必须写在 Flex 样式之前，否则 IE9/IE10 可能部分解析 Flex 规则导致冲突
最麻烦的不是写错，而是写“看起来对”——比如 -ms-flex-pack: center 在 IE10 里没报错，但实际没生效，页面只是恰好凑巧对齐了。调试时一定要拿 Chrome 渲染结果逐项对比，尤其检查子项的 computed width 和 alignment behavior。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
