ie9及更早版本完全不支持flex布局，ie10–ie11仅支持带-ms-前缀的旧语法且存在诸多bug；需分别处理display、flex-direction、justify-content等属性的兼容写法，并彻底移除float/vertical-align；ie9只能降级使用float/table/inline-block等传统方案。
IE9 及更早版本完全不支持 Flex 布局，连 display: flex 都会被忽略；IE10–IE11 支持但存在大量语法差异和渲染 Bug，不能直接照搬现代写法。
IE10–IE11 的 flex 语法必须用旧版前缀
IE10 使用的是 2012 年草案（display: -ms-flexbox），IE11 虽然支持无前缀 display: flex，但很多属性仍需 -ms- 前缀才能生效。比如：
-
flex-direction在 IE10/11 中要写成-ms-flex-direction -
justify-content对应-ms-flex-pack（IE10）或-ms-flex-pack/-ms-justify-content（IE11 行为不一致） -
align-items对应-ms-flex-align -
flex: 1必须拆成-ms-flex: 1，否则在 IE10 下无效
只加 display: flex 而不补全前缀属性，布局大概率会塌陷或错位。
flex 容器子元素的 float / vertical-align 会失效
这是现代 Flex 的标准行为，但在兼容处理时容易被忽略：一旦父容器设为 display: flex（或 -ms-flexbox），所有直系子元素的 float、clear、vertical-align 属性都会被强制忽略。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 如果你的旧代码依赖
float: left实现横向排列，切换 flex 后必须改用flex-direction: row+flex-wrap - 依赖
vertical-align: middle垂直居中的行内元素，在 flex 容器里得改用align-items: center（或 IE 下的-ms-flex-align: center） - 混用 float 和 flex 极易导致布局不可预测，建议一次性清理相关样式
IE9 及以下只能降级为 float / table / inline-block
没有取巧办法。IE9 不识别 display: flex，也不支持 -ms-flexbox（那是 IE10 才引入的）。常见兜底方案有：
- 用
display: table-cell+vertical-align: middle模拟垂直居中（但高度需固定） - 用
float: left+margin或calc()控制宽度（响应式受限） - 用
display: inline-block+font-size: 0清除间隙（兼容性好，但换行逻辑难控） - 借助条件注释或 JS 检测 UA，对 IE9 单独加载一套传统布局 CSS
别试图用 Autoprefixer 或 PostCSS “自动修复” IE9 —— 它们只加前缀，不替换语法，对 IE9 无效。
真正麻烦的不是写两套样式，而是交叉轴对齐、flex 项目顺序重排、flex-wrap 换行后的行为差异——这些在 IE10–11 中表现不一，必须逐项测试，不能只看主轴效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
