ie8–ie10中class属性动态操作易因空格异常（连续/首尾/中文空格）导致整个class值被丢弃，且不报错；应禁用+=、强制标准化空格、优先用classlist（ie9+）或api存在性检测兜底，避免直接赋值覆盖。
class属性动态操作在IE8–IE10中会触发旧内核解析异常
IE8–IE10对className字符串的空格处理极敏感：若拼接时出现连续空格、首尾空格或中文空格（U+3000），旧内核会直接丢弃整个class值，导致样式和JS逻辑全部失效，且控制台不报错。这不是CSS加载问题，是DOM属性解析阶段就失败了。
常见诱因包括：el.className += ' active'（前面没空格）、el.className = 'btn' + (isActive ? ' active' : '')（可能生成btn active但中间是中文空格）、或从getAttribute('class')读取后未清洗直接重写。
- 永远别用
+=操作className，哪怕只加一个类 - 手动拼接前必须
.trim().replace(/\s+/g, ' ')标准化空格 - IE下
getAttribute('class')返回值可能含不可见字符，建议改用el.className读取原始值 - 如果必须兼容IE8，
classList需垫片（如classlist-polyfill），但注意该polyfill不修复className拼接缺陷
classList.add/remove在IE9+才原生支持，IE8需降级兜底
classList是解决空格问题的首选，但它在IE9才开始支持；IE8完全无此API。直接调用el.classList.add('active')会在IE8抛Object doesn't support property or method 'add'错误，且无法捕获——因为它是属性访问时报错，不是方法调用。
安全降级方案不是“判断浏览器版本”，而是检测API存在性：
- 用
'classList' in el判断是否可用，而非navigator.userAgent - IE8兜底函数必须手动管理空格：
function addClass(el, cls) { const cur = el.className.split(' ').filter(Boolean); if (!cur.includes(cls)) cur.push(cls); el.className = cur.join(' '); } - 避免封装成
addClass(el, 'a b')这种多类输入——IE8兜底函数不处理空格分隔，应拆成addClass(el, 'a'); addClass(el, 'b')
服务器端渲染（SSR）初始class与客户端动态操作冲突
当服务端已输出<div class="btn primary"></div>，客户端JS又执行el.className = 'btn loading'，IE9–IE10会把原有primary彻底清掉。这不是覆盖问题，是旧内核在首次解析DOM时把class值缓存为内部结构，后续赋值会重置整个结构体，而非增量更新。
正确做法是始终基于当前状态操作：
- 初始化后立刻用
el.className读取真实值，不要依赖HTML源码中的字符串 - 状态变更时优先用
classList（IE9+）或兜底函数，而非直接赋值el.className - 若用框架（如Vue 2），
:class="{ 'loading': isLoading }"本质是计算后重写className，在IE中同样有丢失风险；应改用class="btn primary" :class="{ loading: isLoading }"让框架做合并而非替换
微前端场景下子应用class被父应用CSS穿透覆盖
父应用全局写了button { background: red !important }，子应用动态加btn-primary类也无效——这不是class操作问题，而是旧内核对!important的解析优先级更高，且不支持现代CSS作用域隔离机制。
在IE兼容需求下，唯一可控手段是提升子应用选择器权重：
- 避免纯类名选择器，改用
body .sub-app button.btn-primary（增加层级） - 禁用
!important，改用更具体的选择器组合，例如html body div#app button.btn-primary - 若用Shadow DOM，IE完全不支持，所以微前端中IE用户只能接受CSS穿透——这是技术债，不是代码能绕过的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
