MathML 渲染失败时浏览器通常不报错，页面空白；Chrome/Edge 仅支持约60% MathML 3.0 特性，Firefox 支持最全，Safari 次之，复杂标签如 或 notation="longdiv" 易被忽略。
MathML 渲染失败时浏览器报什么错误？
直接写 <math></math> 标签但页面空白，控制台通常不报错——这是最坑的地方。MathML 是原生 HTML 标签，但现代浏览器（Chrome、Edge）默认只支持基础子集，<msup></msup>、<mfrac></mfrac> 这类标签能解析，而 <menclose></menclose>、<maction></maction> 或带 notation="longdiv" 的除法符号大概率被忽略。Firefox 支持最完整，Safari 次之，Chrome 实际只渲染约 60% 的 MathML 3.0 特性。
哪些公式必须用 MathML + fallback 方案？
纯 MathML 在生产环境几乎不可靠，尤其遇到以下场景：
- 含多重嵌套
<mtable></mtable>的矩阵（比如带括号、省略号、行间标注的 4×4 协方差矩阵） - 使用
<semantics></semantics>+<annotation></annotation>提供 LaTeX 备份的公式（屏幕阅读器依赖这个） - 需要与 CSS 排版联动的行内公式（例如
display: inline-flex包裹<math></math>，Chrome 会崩掉 vertical-align）
正确做法是始终包裹一层 <span class="math-inline"></span> 或 <div class="math-display">，并在 JS 中检测 <code>document.createElement('math').tagName === 'MATH' 再决定是否启用 MathML 渲染逻辑。
MathML 和 KaTeX 共存时怎么避免冲突？
如果项目已用 KaTeX（比如通过 renderMathInElement()），又想局部试 MathML，注意三点：
- KaTeX 默认扫描并替换所有
$$...$$和\(...\)，它会把页面中未闭合的<math></math>当普通文本吞掉，导致后续 MathML 标签结构错乱 - 必须在 KaTeX 初始化前，用
document.querySelectorAll('math')提前提取内容，再用innerHTML临时替换成占位符（如<span data-mathml-id="1"></span>） - MathML 内部若含
&、、<code>>，必须实体化为&、<、>；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 对 <math></math> 的重排版开销极大，尤其公式内有 <mpadded></mpadded> 或动态 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 行的
<mtable></mtable>建议降级为图片（用 MathJax 的SVG输出生成静态<img src="data:image/svg+xml;base64,..." alt="如何在网页中插入复杂的数学公式？Mathml标签实现公式渲染" >）
真正棘手的是可访问性：VoiceOver 能读出 MathML 结构，但无法朗读自定义 <annotation encoding="application/x-tex"></annotation> 里的 LaTeX。这意味着你得额外维护一份 plain-text 描述，藏在 aria-label 里——这点几乎没人做，但 WCAG 2.1 AA 级要求如此。
