根本原因是IE8–IE10缺失HTML5标签识别、媒体查询支持和现代盒模型解析能力；必须配合html5shiv（置于head最顶部）、respond.js（同域加载）、IE=edge meta（head首个标签）及-ms-前缀等综合方案。
Bootstrap 3 在 IE8–IE10 中无法正常渲染，根本原因不是“样式写错了”，而是浏览器缺失 HTML5 语义标签识别能力、媒体查询支持和现代盒模型计算逻辑。单纯改 CSS 几乎无效，必须配合 HTML 声明、JS polyfill 和渲染模式控制。
IE8 渲染失败：缺 html5shiv 和 respond.js 就别谈响应式
IE8 不认识 <nav>、<section> 这类标签，也不解析 @media 查询，导致栅格系统全乱、导航栏塌陷、按钮错位。仅靠 CSS 重写无法补上这两块底层能力缺口。
-
html5shiv.min.js必须放在<head>最顶部（<title>之前），否则 IE8 会跳过后续所有语义化标签解析 -
respond.min.js必须与 Bootstrap CSS 文件同域加载；用 CDN（如https://cdn.jsdelivr.net）时需额外配置 proxy 页面，否则直接失效 - 不能用
@import引入 CSS，IE8 下@import会阻塞respond.js对媒体查询的劫持 - JQuery 版本必须 ≤ 1.12.4 —— Bootstrap 3 不兼容 JQuery 2.x+ 的 IE8 移除逻辑
IE9–IE10 组件错位：CSS 前缀、viewport 和 box-sizing 得手动补
IE9 支持部分媒体查询但不识别 transition、transform；IE10 对 box-sizing: border-box 解析有偏差，导致 .col- 宽度计算错误，常见于表单控件和输入框组。
- 为关键交互组件加
-ms-前缀：.dropdown-menu { -ms-transform: translateZ(0); } - 强制修复视口宽度：
@-ms-viewport { width: device-width; }，否则 Windows Phone 8 或 IE10 桌面版会忽略viewportmeta - 重置所有栅格容器的盒模型：
.container, .row, .col-xs-*, .col-sm-* { -ms-box-sizing: border-box; box-sizing: border-box; } - 禁用依赖
IntersectionObserver的 JS 行为（如affix），改用window.onscroll+getBoundingClientRect()手动判断位置
IE 兼容模式是最大陷阱：meta 标签顺序和值必须严格匹配
哪怕所有 JS 和 CSS 都正确，只要 IE 进入“兼容性视图”，文档模式就会回落到 IE7 Quirks，此时 Bootstrap 的浮动布局、inline-block 行为、甚至 float: right 都会彻底失灵 —— 这不是 bug，是 IE 主动降级渲染引擎。
立即学习“前端免费学习笔记（深入）”；
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">必须是<head>中**第一个** meta 标签（在<title>之前），否则被忽略 - 绝对不要写
content="IE=9"或content="IE=10"—— 这会锁死内核，反而阻止 Edge 模式启用 - 国产双内核浏览器（360、QQ）默认走 IE 内核，需额外加
<meta name="renderer" content="webkit">触发高速模式 - F12 开发者工具中“文档模式”必须显示为
Edge，若显示7、8或Quirks，说明页面已被加入 IE 兼容性视图列表，需手动清除
真正卡住人的从来不是某一行 CSS，而是 html5shiv 加载时机、respond.js 的跨域限制、X-UA-Compatible 的位置，以及 IE 自身对“兼容性视图”的顽固记忆。这些点任何一个出错，整套兼容方案就归零。
