MathML 渲染失败时浏览器通常不报错，页面空白；Chrome/Edge 仅支持约60% MathML 3.0 特性，Firefox 支持最全，Safari 次之，复杂标签如 或 notation="longdiv" 易被忽略。

MathML 渲染失败时浏览器报什么错误？

直接写 $$ 标签但页面空白，控制台通常不报错——这是最坑的地方。MathML 是原生 HTML 标签，但现代浏览器（Chrome、Edge）默认只支持基础子集，、 这类标签能解析，而 、 或带 notation="longdiv" 的除法符号大概率被忽略。Firefox 支持最完整，Safari 次之，Chrome 实际只渲染约 60% 的 MathML 3.0 特性。

哪些公式必须用 MathML + fallback 方案？

纯 MathML 在生产环境几乎不可靠，尤其遇到以下场景：

• 含多重嵌套 的矩阵（比如带括号、省略号、行间标注的 4×4 协方差矩阵）
• 使用 + 提供 LaTeX 备份的公式（屏幕阅读器依赖这个）
• 需要与 CSS 排版联动的行内公式（例如 display: inline-flex 包裹 $$，Chrome 会崩掉 vertical-align）

正确做法是始终包裹一层 或

，并在 JS 中检测 document.createElement('math').tagName === 'MATH' 再决定是否启用 MathML 渲染逻辑。

MathML 和 KaTeX 共存时怎么避免冲突？

如果项目已用 KaTeX（比如通过 renderMathInElement()），又想局部试 MathML，注意三点：

• KaTeX 默认扫描并替换所有 $$...$$ 和 \(...\)，它会把页面中未闭合的 $$ 当普通文本吞掉，导致后续 MathML 标签结构错乱
• 必须在 KaTeX 初始化前，用 document.querySelectorAll('math') 提前提取内容，再用 innerHTML 临时替换成占位符（如 ）
• MathML 内部若含 &、、>，必须实体化为 &、、>；KaTeX 的 LaTeX 字符串则不需要——混用时极易漏转义

示例安全写法：

<math xmlns="http://www.w3.org/1998/Math/MathML"><mfrac><mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow><mrow><mi>c</mi><mo>−</mo><mi>d</mi></mrow></mfrac></math>

移动端 MathML 渲染卡顿或字体糊怎么办？

iOS Safari 对 $$ 的重排版开销极大，尤其公式内有 或动态 style="font-size: 1.2em" 时。实测发现：

• 禁用 user-scalable=no 的 viewport 会导致 MathML 文字缩放失真，但开启后双击放大又触发重绘卡顿
• Android Chrome 下，font-family 设为 "STIXTwoMath", "Cambria Math", sans-serif 比默认更稳；iOS 必须加 -webkit-text-stroke: 0.5px 防字体发虚
• 超过 3 行的 建议降级为图片（用 MathJax 的 SVG 输出生成静态 ）

真正棘手的是可访问性：VoiceOver 能读出 MathML 结构，但无法朗读自定义 里的 LaTeX。这意味着你得额外维护一份 plain-text 描述，藏在 aria-label 里——这点几乎没人做，但 WCAG 2.1 AA 级要求如此。