应放弃按IE版本加载CSS的思路，因其在IE11+失效且引发闪动、HMR中断；条件注释是IE6–IE9唯一稳定方案；@supports+class回退适配IE10+；HTC仅限IE6–IE8且能力有限。
直接放弃“按IE版本加载不同CSS文件”的思路——它在IE11+和Edge中完全失效，且现代构建工具无法静态分析，还会引发样式闪动、HMR中断等实际问题。
为什么 userAgent + 动态
IE11 及 Edge 的 navigator.userAgent 已被刻意弱化：返回字符串里含 "Trident/7.0" 但不带具体版本号；Chrome/Firefox/Safari 也已禁用精确识别。你写的 if (ua.indexOf('MSIE 8') !== -1) 在 IE11 兼容模式下可能误判，在 Edge 现代模式下根本不会命中。
- 动态插入
会触发额外 CSS 解析与重排，拖慢首屏渲染 -
DOM ready前插入，部分浏览器不应用；太晚插入，用户可见样式跳变（FOUC） - Vite/Webpack 等工具无法提取、压缩、Tree-shake 这类运行时引入的 CSS，产物体积失控
条件注释仍是 IE9 及以下唯一稳定方案
条件注释（Conditional Comments）在 IE10+ 中已被移除，但它对 IE6–IE9 是原生支持、无 JS 依赖、无竞态风险的降级通道，至今仍是最小侵入的兼容手段。
- 必须放在
标签上，而非内部： - 对应 CSS 中用
.ie8 .btn而非单独写.btn，确保权重可控、不污染现代样式流 - 不要混用：避免
.ie8 .btn:where(.primary)—— IE8 连:where()都解析失败，整条规则丢弃
@supports + class 回退才是现代项目该走的路
IE10+ 支持 @supports，但 IE9 及以下不支持。所以真实可行的组合是：@supports 处理 IE10+，条件注释兜底 IE9–IE6，两者分层不耦合。
- 现代写法用
@supports (display: grid)包裹，降级写法用.ie10-plus .grid单独声明 - JS 控制 class 落在哪一层 DOM 上（如
document.documentElement.classList.add('ie10-plus')），比动态加载更可控 - 注意：CSS.supports(
'selector(:has(a))') 在 IE11 不可用，需先判断 API 是否存在，不存在就直接走 class 降级路径
HTC 行为文件（如 pie.htc）仅限 IE6–IE8 且有硬限制
behavior: url(pie.htc) 是 IE 特有机制，仅在 IE6–IE8 有效，IE9+ 和所有现代浏览器完全忽略。它不是“补丁”，而是用 VML + JS 模拟渲染效果，性能差、调试难、不支持伪元素和复杂嵌套。
- 必须通过 HTTP(S) 协议提供，
file://协议下 IE 直接拒绝加载 - 不能和滤镜（
filter）共存于同一元素，否则滤镜效果会意外转移到子元素 - 圆角、阴影、渐变可勉强模拟，
flex、grid、transform等布局类特性无法靠 HTC 实现
真正关键的不是“怎么让 IE8 支持 border-radius”，而是“哪些视觉降级能接受、哪些必须砍掉”。比如居中需求，place-items: center 在 IE8 里连语法都无效，不如直接用 text-align: center + vertical-align: middle + 表格布局兜底——语义一致、可控、无副作用。别试图用 JS 把新语法“翻译”成旧写法，那只会让维护成本指数上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
