MathML 在 Chrome/Edge 中默认不渲染，仅 Firefox/Safari 原生支持；需用 MathJax 无感接管或 ASCIIMathML 快速替代，无通用最优解。
MathML 标签在现代网页中不能直接当作“开箱即用”的解决方案——它只在 Firefox 和 Safari（macOS/iOS）里原生渲染可靠；Chrome/Edge 默认不启用 MathML 渲染引擎，写完 <math><mi>x</mi><mo>+</mo><mn>1</mn></math> 会显示为空白，控制台也不报错，这是最常踩的坑。
MathML 在 Chrome/Edge 中为什么没反应
- 浏览器识别
<math>标签，但不执行排版逻辑：DOM 存在、元素可见，只是没调用渲染管线 - 不是语法错，不是路径错，也不是编码问题，而是 Chromium 系列（包括 Edge）至今未默认启用完整 MathML 引擎（Chrome 109+ 仅支持约 60% 的 MathML 3.0 特性）
-
document.createElement('math').tagName === 'MATH'返回true，不代表能渲染——这只是标签被识别，不是公式能显示
常见误判现象：
- 在 Chrome 里右键“查看网页源代码”，看到标签完好 → 以为没问题
- 开发者工具里能看到
<math>节点 → 以为已加载成功 - 把公式塞进
<pre>或<code>里 → 只会当纯文本显示源码，完全不解析
正确验证方式：在 Firefox 或 Safari 中打开同一页面，看是否正常渲染；若只有它们能显示，就确认是浏览器兼容性问题。
什么时候必须放弃裸写 <math>
以下场景下，纯 <math> 标签几乎必然失败，必须加降级：
- 公式含
<menclose notation="longdiv">、<maction>、<mspace>等非基础标签 - 使用
<mtable>描述矩阵，尤其带<mfenced>括号或<mpadded>微调时 - 行内公式嵌套在
display: inline-flex或vertical-align容器中（Chrome 会错乱基线） - 需要屏幕阅读器支持：单靠
<math>缺少语义包裹，应配<semantics>+ LaTeX 备份
简单判断法：只要公式超过两层嵌套（比如 <msup><mi>e</mi><mfrac>...</mfrac></msup>），就建议绕过原生 MathML，改用更稳方案。
用 MathJax 接管 <math> 标签最简落地方式
MathJax 是目前唯一能无感接管已有 <math> 标签的方案，无需重写公式：
- 在
<head>中插入：<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
- 不需要手动调用
MathJax.typeset()，它会自动扫描并渲染所有<math>块 - 动态插入内容后，只需调用：
MathJax.typeset([element])，其中element是包含新公式的 DOM 节点
注意两点：
- 不要和
async或defer的脚本并行加载，确保 MathJax 在公式 DOM 就绪后执行 - 若页面有中文混排，
tex-svg模式比chtml更准（后者在部分字体下易错位）
ASCIIMathML 是最快上手的替代路径
如果你不想碰 XML 标签、也不愿引入重型库，ASCIIMathML 提供类计算器语法，一行 JS 即可启动：
- 引入：
<script src="ASCIIMathML.js"></script> - 写法：
<p>求根公式：<code>x = (-b +- sqrt(b^2 - 4ac))/(2a)</p> - 支持上下标、分式、根号、求和、积分、矩阵，且对移动端友好
但它不生成标准 MathML，也不适配语义化需求；如果未来要接入辅助技术或导出为 EPUB/PDF，这条路后期扩展成本高。
真正容易被忽略的一点：没有“通用最优解”。Firefox 用户多就可裸用 <math>；教育类静态页推荐 ASCIIMathML；科研文档或需长期维护的站点，MathJax + LaTeX 输入才是实际可持续的选择。
