旧版ie（尤其是ie8及以下）完全忽略@media、flex、grid等响应式特性，必须用条件注释
旧版 IE（尤其是 IE8 及以下）根本不会解析 @media 查询、flex、grid、vw/vh、calc() 等响应式核心特性，不是“效果不好”，而是直接忽略整条规则——你写的媒体查询块在 IE8 里等于不存在，浏览器照着最上面一条 width: 100% 就渲染完了。
IE8 及以下连 @media 都不执行，降级必须靠条件注释
现代响应式 CSS 依赖 `@media (max-width: 768px)` 切换布局，但 IE8 及更早版本完全无视 `@media` 语法，连解析都不解析。不能指望它“部分生效”或“自动 fallback”。
- 必须用 HTML 条件注释精准加载 IE 专属样式表：
这种写法在 IE10+ 已被移除，所以它只影响目标版本，不会污染新浏览器 -
<!--[if lt IE 9]><link rel="stylesheet" href="ie8-responsive.css"><![endif]-->—— 注意是lt IE 9，不是IE 8，否则 IE7 会漏掉 - 不要把响应式规则和降级规则混写在一个 CSS 文件里：IE8 会跳过整个含
@media的规则块，但如果前面有.header { width: 100%; }，它还是会执行——所以降级样式必须写在响应式样式之前
flex 布局在 IE10–IE11 里失效，不是缺前缀而是语法不兼容
IE10–IE11 支持的是 2012 年草案版 Flexbox（-ms-flexbox），和现在标准的 display: flex 是两套完全不同的属性名和值逻辑。只加 -ms- 前缀，不改属性值，照样白搭。
-
justify-content: space-between在 IE11 中要写成-ms-flex-pack: distribute，不是space-between -
flex: 1在 IE10 解析为flex: 0 0 auto，必须显式写-ms-flex: 1 - autoprefixer 不会帮你转
-ms-flex-pack这类值，得手动补全，或引入postcss-flexbugs-fixes - 如果项目还要支持 IE9 及以下，
display: -ms-flexbox也无效，只能回退到display: table-cell或float+ 固定百分比宽度
Grid 在 IE11 中不是“兼容差”，而是“根本不认识 display: grid”
IE11 的 display: -ms-grid 是一套独立于现代 Grid 的二维定位系统：没有 grid-template-areas，没有 gap，没有 fr 单位，所有子项必须用 -ms-grid-column 和 -ms-grid-row 手动指定位置。
-
@supports (display: grid)在 IE11 中完全无效（它不支持@supports），所以不能靠它分流；必须用 JS 特性检测或服务器端 UA 判断 - autoprefixer v9+ 已彻底移除对 IE Grid 的支持，配了
grid: true也不会输出任何-ms-代码 - 别用
css-grid-polyfill：它靠 JS 动态重排 DOM，在列表滚动或输入交互时帧率常跌破 5fps，且已停止维护 - 真实项目中，IE11 最靠谱的方案是提供简化线性布局（比如单列流 +
margin-top分隔），而不是强行模拟网格
box-sizing: border-box 在 IE8 中可用，但在 IE7 及以下完全无效
响应式布局中大量使用 width: 100% + padding，而 IE6–7 默认 content-box 模型会让总宽超出预期。虽然 box-sizing: border-box 是解药，但它在 IE7 及以下就是个摆设。
- IE8 支持
box-sizing，但仅限标准模式（必须有），怪异模式下仍走 content-box - IE7 及以下不支持该属性，连
-ms-box-sizing都没用；此时只能手动用width: calc(100% - 20px)补偿 padding/border，或改用固定像素尺寸 - 全局重置
* { box-sizing: border-box }对 IE7 无效，但对 IE8+ 有效——前提是你的项目真能放弃 IE7 - button、input 等表单元素在旧 IE 中盒模型行为更诡异，它们的默认 padding/border 会额外撑开，光设
box-sizing不够，还得配height+line-height+vertical-align
真正卡住人的从来不是“怎么写降级代码”，而是搞不清哪条规则在哪个 IE 版本里被解析、哪条被跳过、哪条被当成语法错误丢弃。文档模式切换、条件注释范围、autoprefixer 实际能力、polyfill 的运行时开销——这些细节一旦错一个，整个降级链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
