IE8能解析optgroup的label属性但不渲染显示，DOM中存在且可读取，但下拉菜单中无分组标题；JS无法动态补文本，可行方案包括option前缀、disabled假标题或自定义下拉控件。
label 属性在 optgroup 中，IE8 **能解析但不渲染显示**——它会把 label 值读进去，但下拉菜单里完全不显示该分组标题，视觉上等同于没有 optgroup。
IE8 对 optgroup.label 的实际行为
IE8 支持 optgroup 元素和 label 属性的 HTML 解析（不会报错、DOM 中存在），但其原生下拉控件（<select></select> 渲染引擎）**跳过 label 文本绘制逻辑**。即使 DOM 中 optgroup.label = "分类A" 已正确赋值，用户在界面中也看不到任何分组标题。
- 可通过
document.querySelector('optgroup').label读到值，证明属性存在 - 但
select元素展开后，所有option都平铺显示，无视觉分隔 - 这个 bug 不影响 DOM 结构操作，只影响最终 UI 呈现
为什么不能靠 JS 动态补 label 文本
有人尝试用 JS 在 optgroup 内插入文本节点或设置 innerHTML，但在 IE8 下无效：
-
optgroup是自闭合式语义容器，IE8 禁止向其写入文本内容（会静默丢弃） -
appendChild(document.createTextNode("分类A"))不触发渲染，也不报错 - 哪怕用
insertAdjacentHTML往select里插带 label 的完整optgroup，IE8 仍忽略label属性值
可行的兼容方案（仅限必须支持 IE8 场景）
放弃原生 optgroup 的视觉分组，改用以下任一方式模拟：
- 在
option中手动添加前缀，例如：<option value="a">【分类A】选项1</option> - 用 disabled 的
option充当“假分组标题”：<option disabled>── 分类A ──</option>（IE8 支持 disabled option，且会显示为灰色不可选） - 彻底替换控件：用 div + ul 模拟下拉（如 jQuery UI Selectmenu 或手写 dropdown），完全绕过原生
select的限制
真正棘手的是：IE8 的这个表现不是 DOM 缺失，而是渲染层硬伤——你查得到 label，改得了属性，就是看不见。如果项目还卡在 IE8 兼容要求里，优先考虑禁用分组语义，或推动浏览器升级。毕竟连微软自己都已在 2016 年终止 IE8 支持，现在修它，本质上是在维护一个已失效的渲染契约。
