IE9及更早版本不识别标签，需通过html5shiv注册标签、显式定义样式、改用class降级三步解决兼容问题。
HTML5 的 标签在 IE9 及更早版本中完全不被识别，直接渲染为无样式行内元素，无法实现“高亮标注重点”的语义和视觉效果——降级方案必须同时解决语义保留、样式兜底、脚本可读性三个问题。
IE8–IE9 下
页面中写 关键术语，在 IE8/9 中：文字既无黄色背景，也无特殊边框；开发者工具里该标签存在但无默认样式；getComputedStyle() 读取不到 background-color；用 jQuery $('mark') 选不到元素（因 IE8 不支持 HTML5 新标签）。
- 根本原因：IE9 及以下不注册 HTML5 新标签，
document.createElement('mark')未执行过，浏览器视其为未知元素，不参与 CSS 渲染流程 - 不是样式没写对，是标签压根没被当作有效元素解析
- 即使手动加 CSS（如
mark { background: #ff0; }），IE8/9 仍忽略整条规则（因选择器含未知标签名）
兼容低版本 IE 的三步强制降级法
不能只靠 CSS 修复，必须从标签识别、样式注入、DOM 可操作性三方面同步处理：
- 在
中引入html5shiv.js（或使用条件注释加载）：它会为 IE8/9 动态创建mark等 HTML5 标签，并让它们支持 CSS 选择器 - 为
显式定义基础样式（不可依赖 UA 默认）：mark { background: #ff0; color: #000; padding: 0 2px; }注意：IE8 不支持rgba()和hsl()，避免用background: rgba(255,255,0,0.3) - 确保 JS 能正确选取和操作：
document.querySelectorAll('mark')在 IE8 中无效，改用document.getElementsByTagName('*')遍历后判断nodeName === 'MARK'，或统一用 class 替代（见下一条）
更稳妥的 class 降级替代方案（推荐生产环境用）
当项目需支持 IE7 或对脚本兼容性要求极高时，放弃原生 ，改用语义清晰的 class 命名，兼顾可读性与可控性：
立即学习“前端免费学习笔记（深入）”；
- HTML 写法：
关键术语或强调内容 - CSS 同时覆盖新旧浏览器：
.highlight, mark { background: #ff0; padding: 0 2px; } /* IE6–7 需要 zoom:1 触发 hasLayout */ .highlight { zoom: 1; } - JS 操作统一走 class：
document.querySelectorAll('.highlight')全版本兼容；服务端模板或 Markdown 渲染器也更容易识别和替换 - 语义损失？实际影响极小——
本身在无障碍中支持度有限，屏幕阅读器多数不特别播报，而class="highlight"配合 ARIArole="note"反而更可控
真正容易被忽略的是：即使用了 html5shiv，IE8 下 仍不支持 :hover 伪类（除非父元素有 hasLayout），且所有 HTML5 标签在 IE8 中默认 display 为 inline，若需块级行为必须显式声明 display: inline（它不会自动继承 block）。这些细节不测试就上线，高亮交互会静默失效。
