respond.js仅修复ie6–ie8对@media的解析，不支持flex、grid、calc等现代css特性，页面仍会塌陷错位；需配合html5 shiv、条件注释加载ie专属样式及手动降级布局方案。
Respond.js 不能修复 IE8 及以下的响应式布局错乱，它只解决媒体查询（@media）解析问题，但无法补全 flex、grid、calc、border-radius 等现代 CSS 特性缺失——页面仍会塌陷、错位、样式丢失。
Respond.js 在 IE6–IE8 中只管 @media，其他全不管
Respond.js 的作用非常明确：让 IE6–IE8 能识别和执行 @media screen and (max-width: 768px) 这类语句。但它不会：
- 把
display: flex自动转成display: table或 float 布局 - 给
box-sizing: border-box加 polyfill（IE6–IE7 根本不支持该属性） - 修复
calc()表达式失效（IE8 支持有限，IE7 完全不认） - 模拟
rem单位（IE8 及以下只认px和em）
常见错误现象：引入 Respond.js 后，IE8 里导航栏突然堆成一列、卡片宽度全变成 100%、圆角按钮变直角方块——这不是 Respond.js 失效，是它压根没承诺处理这些。
用条件注释加载 IE 专属样式表比 JS 判断更可靠
JS 动态切换 link.href 会导致 FOUC（Flash of Unstyled Content）：页面先按现代 CSS 渲染一次（在 IE8 里就是一团乱），再等 JS 执行完才换回 IE8 样式表，用户能明显看到“闪一下再正常”。而条件注释在 HTML 解析阶段就生效，无延迟。
- 匹配 IE8 及更早：
<!--[if lt IE 9]><link rel="stylesheet" href="ie8.css"><![endif]--> - 只匹配 IE8（排除 IE7）：
<!--[if IE 8]><link rel="stylesheet" href="ie8-only.css"><![endif]--> - IE10+ 完全忽略条件注释，所以必须确保主样式表本身对 IE10 有降级（比如不用
flex-wrap，改用float+clear）
注意：documentMode 在 IE10+ 已不可靠，别用 JS 检测 document.documentMode 来决定加载哪套 CSS——它在 IE10 标准模式下返回 10，但在某些企业内网强制兼容模式下可能返回 7，结果误判。
IE8 降级布局必须放弃 flex，改用 display: table 或 float
IE8 不支持 display: flex，加 display: -ms-flexbox 也没用——这个前缀只在 IE10+ 生效。真实可用的回退方案只有两个：
-
display: table+display: table-cell：适合单行均分、水平居中（text-align: centeron container）、等高需求；但不支持margin，垂直对齐靠vertical-align，且 IE7 不支持 -
float: left+ 百分比宽度 +box-sizing: border-box（IE8 支持，IE7 不支持，需手动预留 padding/border 空间）：兼容性最广，但需要写clear: both清除浮动，响应式断点要重算所有百分比
关键细节：IE8 下 width: calc(100% - 20px) 会被直接忽略，必须写死 width: 98% 或用 JS 计算后设内联样式；background: linear-gradient 会退化为纯色，得用 PNG 背景图替代。
真正容易被忽略的是编码与文档模式双重陷阱
即使 CSS 写对了，IE8 页面仍可能空白或错位，原因常藏在底层：
- ASPX 页面默认 UTF-8 编码，但 CSS 文件若保存为 GBK/GB2312，IE8 会解析失败——检查 CSS 文件实际编码，统一存为 UTF-8（无 BOM）
- DOCTYPE 缺失或错误（如
）会让 IE8 进入 Quirks 模式，此时盒模型、浮动、<code>min-height全部失效 - IE 开发者工具里的“文档模式”显示为 IE8，但实际渲染可能是 IE7 标准模式（因服务器返回了
X-UA-Compatible: IE=7响应头）——务必在里加<meta http-equiv="X-UA-Compatible" content="IE=Edge">强制最新模式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
