ie11忽略含不支持伪类的整条css规则，如:not()、:first-of-type等；需拆分规则、禁用非链接:hover、补全flex/transform前缀、避免现代特性，并检查scss/vue编译输出。
IE11不报错但样式“消失”，其实是选择器被整条忽略
IE11 对 :not()、:first-of-type、:nth-child() 等伪类完全不支持，只要规则里出现一次，整条 CSS 规则就会被跳过——不是部分失效，是直接丢弃。比如 .card:not(.card--disabled) .card__button 在 IE11 中等于没写。
常见错误现象：.menu:hover .menu__item 在非 <a></a> 元素上无效；.btn[data-loading] 这类属性选择器虽能解析，但触发频繁重计算，且无法被 CSSOM 缓存。
- 把
:not(.x)拆成两个独立规则：.card .card__button和.card--disabled .card__button { display: none; } - 禁用所有
:hover用于非链接元素，改用 JS 切换.menu--hovered .menu__item - 避免在媒体查询外使用
@supports包裹 BEM 修饰符，IE11 不识别该语法，会导致降级失效
修饰符（Modifier）样式在 IE11 中静默失败的典型场景
BEM 的 --modifier 名字本身没问题，但常绑定现代 CSS 特性：Flex gap、background-clip: text、transform、calc() 等。IE11 不支持这些，也不会 fallback，而是直接忽略整条声明。
常见错误现象：.button--loading 设了 display: flex; gap: 4px → 子项堆叠错位；.heading--gradient 用了 background-clip: text → 文字变透明无提示。
- 所有 Flex 相关声明必须补全前缀：
display: -ms-flexbox、-ms-flex-direction: column、-ms-flex-wrap: wrap -
transform必须同时写-ms-transform: rotate(90deg)，仅写标准版在 IE11 中无效 - 用
background-image: linear-gradient()替代background-clip: text+color: transparent，确保文字始终可见
SCSS 编译后生成的选择器，可能悄悄引入 IE11 不兼容语法
很多人用 SCSS 写 .card { &__header { } }，看似安全，但一旦加了 &:not(.card--disabled) 或嵌套 &__item:hover，编译结果就含 IE11 不认的语法。更隐蔽的是，Vue 的 <style scoped></style> 默认注入 [data-v-xxx] 属性选择器，让原本简单的 .btn 变成 .btn[data-v-abc123] ——虽能运行，但失去单类选择器的解析优势。
- 检查编译后 CSS 文件，搜索
:not、:nth、::before（IE8/9 只认:before），确认无残留 - Vue 项目中禁用 scoped 的属性选择器：配置
css-loader的modules: { auto: false }，或改用<style module></style>手动控制 - Sass 中慎用
@at-root，&__item { @at-root .list & { ... } }会生成.list .list__item，破坏 BEM 扁平原则且增加嵌套层级
BEM 类名本身没问题，但“怎么用”决定 IE11 能不能渲染出来
IE11 完全接受 .card__header--large 这种字符串，它的问题从来不在命名，而在你如何组织选择器、绑定什么特性、以及构建流程是否校验输出。真正难防的是语义越界：比如把交互状态 --hovered 写进类名，再配合 :hover 使用，导致 IE11 下既无悬停反馈，又没降级 class。
最容易被忽略的一点：BEM 的性能优势（单类匹配快）和兼容性保障（无伪类依赖）是同一枚硬币的两面。你删掉一个 :not()，不只是为 IE11 修复样式，更是让所有浏览器少做一次 DOM 回溯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
