ie下bootstrap flex布局根本不会渲染，因ie10/11不支持display: flex或仅支持带-ms-前缀的旧语法，导致容器回退为block布局而错乱；中文显示异常主因是编码链路（meta、响应头、字体栈）不一致或兼容模式强制降级。
“乱码”不是真实问题——IE浏览器下Bootstrap弹性布局（Flexbox）根本不会渲染，更谈不上显示中文乱码。你看到的“文字叠在一起”“按钮挤成一团”“导航栏塌陷成竖条”，其实是Flex容器完全失效后，回退到浮动或块级流式布局导致的视觉错乱。
IE10–IE11不支持display: flex，但会静默忽略
IE10只支持旧版Flex语法（display: -ms-flexbox），IE11虽支持部分现代Flex属性，但必须配合-ms-前缀且有严重限制：不支持flex-wrap: wrap、align-content、gap等关键特性。一旦CSS中写了display: flex，IE10/11直接跳过整条规则，后续子元素按display: block重新排布，导致栅格、卡片、导航全部错位。
- 检查开发者工具F12 → “计算样式”面板，看
display值是否为block或inline——说明Flex已被丢弃 - 不要依赖Autoprefixer自动加前缀：它对IE10/11的
-ms-flex支持不完整，需手动补全整套旧语法 - Bootstrap 4+默认已放弃IE10及以下，若必须兼容，应回退到Bootstrap 3（用浮动栅格）或自行重写Flex组件为
float+calc()
中文本身不会“乱码”，但字体和编码链路容易断
真正影响中文显示的是HTML文档编码、HTTP响应头、字体栈三者是否一致。IE对charset声明异常敏感，任意一环缺失就会触发Mojibake（乱码）。
-
<meta charset="UTF-8">必须放在最顶部，且不能被条件注释包裹 - 避免用
@import引入CSS：IE会阻塞解析，导致meta之后的样式延迟加载，中文文本先以系统默认编码（如GBK）渲染，再重绘时出现闪烁或残留乱码 - 显式声明中文字体：
.container { font-family: 'Microsoft YaHei', 'SimHei', sans-serif; }，否则IE可能 fallback 到不支持UTF-8的旧字体（如Courier New） - 后端响应头必须含
Content-Type: text/html; charset=UTF-8，否则IE无视HTML内的meta
IE兼容模式是所有问题的放大器
哪怕CSS和HTML都写对了，只要IE进入兼容性视图（文档模式=7/8），整个Flex布局、盒模型、甚至float: right都会回归Quirks模式行为——此时不是“不支持Flex”，而是整个渲染引擎降级到IE5.5水平。
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">必须是中第一个标签（在<title></title>之前），否则被忽略 - 本地开发用
file://协议时，IE11默认启用兼容模式，该meta完全无效——必须通过http://localhost启动服务 - 企业内网常全局启用兼容视图，前端无法绕过，需联系IT部门从组策略中移除域名
真正要盯住的不是“怎么让Flex在IE里跑”，而是确认你的项目是否真的需要支持IE——2026年绝大多数生产环境已禁用IE，强行兼容只会拖慢开发节奏、引入不可测的CSS cascade副作用。如果必须保，优先用Bootstrap 3的浮动栅格，而非给Flex硬打补丁。
