IE9及更早版本不识别标签，需通过html5shiv注册标签、显式定义样式、改用class降级三步解决兼容问题。
HTML5 的 <mark></mark> 标签在 IE9 及更早版本中完全不被识别，直接渲染为无样式行内元素，无法实现“高亮标注重点”的语义和视觉效果——降级方案必须同时解决语义保留、样式兜底、脚本可读性三个问题。
IE8–IE9 下 <mark></mark> 不生效的典型表现
页面中写 <mark>关键术语</mark>，在 IE8/9 中：文字既无黄色背景，也无特殊边框；开发者工具里该标签存在但无默认样式；getComputedStyle() 读取不到 background-color；用 jQuery $('mark') 选不到元素（因 IE8 不支持 HTML5 新标签）。
- 根本原因：IE9 及以下不注册 HTML5 新标签，
document.createElement('mark')未执行过，浏览器视其为未知元素，不参与 CSS 渲染流程 - 不是样式没写对，是标签压根没被当作有效元素解析
- 即使手动加 CSS（如
mark { background: #ff0; }），IE8/9 仍忽略整条规则（因选择器含未知标签名）
兼容低版本 IE 的三步强制降级法
不能只靠 CSS 修复，必须从标签识别、样式注入、DOM 可操作性三方面同步处理：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 在
中引入html5shiv.js（或使用条件注释加载）：<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
它会为 IE8/9 动态创建mark等 HTML5 标签，并让它们支持 CSS 选择器 - 为
<mark></mark>显式定义基础样式（不可依赖 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 或对脚本兼容性要求极高时，放弃原生 <mark></mark>，改用语义清晰的 class 命名，兼顾可读性与可控性：
立即学习“前端免费学习笔记（深入）”；
- HTML 写法：
<span class="highlight">关键术语</span>或<em class="emphasis">强调内容</em> - CSS 同时覆盖新旧浏览器：
.highlight, mark { background: #ff0; padding: 0 2px; } /* IE6–7 需要 zoom:1 触发 hasLayout */ .highlight { zoom: 1; } - JS 操作统一走 class：
document.querySelectorAll('.highlight')全版本兼容；服务端模板或 Markdown 渲染器也更容易识别和替换 - 语义损失？实际影响极小——
<mark></mark>本身在无障碍中支持度有限，屏幕阅读器多数不特别播报，而class="highlight"配合 ARIArole="note"反而更可控
真正容易被忽略的是：即使用了 html5shiv，IE8 下 <mark></mark> 仍不支持 :hover 伪类（除非父元素有 hasLayout），且所有 HTML5 标签在 IE8 中默认 display 为 inline，若需块级行为必须显式声明 display: inline（它不会自动继承 block）。这些细节不测试就上线，高亮交互会静默失效。
