ie6–ie8中div.a.b仅识别.b，nav>ul、h2+p、[type="email"]、:first-child、:nth-child()、::before等选择器均静默失效；关键布局须用单class，避免结构依赖。
老项目里直接加 display: flex 或 @supports 很可能白忙——IE8 甚至 IE9 都不认，而很多线上系统至今还在跑这些版本。关键不是“怎么写新语法”，而是“怎么让旧环境不崩、新环境不降级”。
哪些 CSS2 选择器在 IE6–8 里会静默失效
IE6–8 对选择器的解析是硬伤，不是样式没生效，而是压根没匹配上：
-
div.a.b在 IE6 中只认最后的.b，前面的.a被忽略 -
nav > ul（子选择器）、h2 + p（相邻兄弟）、[type="email"]（属性选择器）全都不支持 -
:first-child、:nth-child(2)、::before这类伪类/伪元素在 IE8 及以下无效
实操建议：老项目中所有关键布局类必须用单 class，比如把 .header-nav-active 拆成 .header-nav 和 .is-active 两个独立 class；避免任何嵌套过深或依赖结构的选择器。
CSS3 属性怎么安全落地，又不拖累现代浏览器
别信 “autoprefixer 一配就完事”——它只加前缀，不解决语法兼容或 fallback 逻辑。比如 flex 在 IE10 是 display: -ms-flexbox，IE11 才支持 display: flex，但两者语法细节不同（flex: 1 在 IE10 下要写成 -ms-flex: 1）。
- 用 PostCSS +
autoprefixer是必须的，但browserslist配置得精确："IE >= 10, Chrome >= 45"比"last 2 versions"更可控 - 对
grid、gap、aspect-ratio这类无降级可能的属性，必须包裹在@supports (display: grid)里，且提供 float / inline-block 布局兜底 -
border-radius、box-shadow这类“锦上添花”的属性，可直接写，不加前缀也不 fallback——IE8 不支持只是少个圆角，不影响功能
为什么直接改 box-sizing 在 IE6–7 里会出问题
IE6–7 的盒模型默认是 border-box，但它的 box-sizing 属性根本不识别。你写 box-sizing: border-box，它们会直接忽略整条声明；而现代浏览器按标准走 content-box。结果就是：同一段 CSS，在老 IE 里宽高算错，在 Chrome 里又算对了。
- 全局重置必须用通配符：
* { box-sizing: border-box; }，autoprefixer 会自动补-moz-box-sizing和-webkit-box-sizing - 但 IE6–7 仍需 hack：给关键容器加
display: inline-block或zoom: 1触发 hasLayout，才能让 padding/border 不撑开 width - 更稳妥的做法是：老项目里所有带
padding或border的块级元素，显式写死width，别依赖box-sizing自动调整
真正难的不是写兼容代码，而是判断哪条规则“必须兼容”、哪条“可以放弃”。比如一个后台管理系统的侧边栏，IE8 下用 float 布局卡顿两秒能接受；但表单输入框的 placeholder 在 IE9 下不显示，就得用 JS 模拟——因为用户要输数据，不能等。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
