HTML5不原生支持MathML，Firefox原生稳定支持，Safari需开启实验功能，Chrome/Edge自2023年起默认禁用；必须声明XML命名空间、设置display属性，避免嵌套HTML标签；推荐使用MathJax替代原生MathML以保障兼容性与可维护性。
HTML5 本身不原生支持 MathML 渲染，浏览器兼容性差（尤其是 Chrome 和 Edge 默认禁用），直接写 <math></math> 标签大概率不显示公式。
MathML 在主流浏览器里到底能不能用
能，但条件苛刻：Firefox 原生支持最稳定；Safari 部分支持（需开启实验性功能）；Chrome/Edge 自 2023 年起默认禁用 MathML，即使写了 <math></math> 也会被忽略——不是语法错，是被主动屏蔽。
- 检查是否启用：在 Chrome 地址栏输入
chrome://flags/#enable-experimental-web-platform-features，开启该选项并重启 - 用
document.createElement('math')测试：返回undefined表示完全未加载 MathML 支持 - 不要依赖
innerHTML = '<math><mi>x</mi></math>'直接插入，DOM 解析时可能丢弃整个<math></math>节点
不用 polyfill 时最简可用的 MathML 写法
绕过浏览器限制的底线方案：用 <math display="block"></math> + 显式命名空间 + Firefox/Safari 专属兜底。
- 必须声明 XML 命名空间：
<math xmlns="http://www.w3.org/1998/Math/MathML"></math> - 行内公式加
display="inline"，块级加display="block"，否则 Safari 可能错位 - 避免嵌套 HTML 标签（如
<span></span>）在<math></math>内，会破坏解析 - 简单示例：
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> <mrow> <msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <mn>2</mn> <mi>x</mi> <mo>+</mo> <mn>1</mn> </mrow> </math>
为什么推荐 MathJax 而不是硬上原生 MathML
因为实际项目中，“能跑”不等于“能维护”：MathML 语义强但写法反直觉，一个 <msqrt></msqrt> 漏闭合标签，整段公式就白写；而 MathJax 把 LaTeX 当输入源，开发者心智负担低得多。
立即学习“前端免费学习笔记（深入）”；
- MathJax v3 默认用
tex-mml-chtml渲染器，自动 fallback 到 SVG 或 HTML-CSS，兼容性碾压原生 - 只需引入 script：
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> - 混排自由：
$x^2 + 2x + 1$（LaTeX）和<math><mi>x</mi></math>（MathML）可共存，MathJax 全部接管 - 性能注意：首次渲染有延迟，大量公式建议预加载或用
tex: { inlineMath: [['$', '$']] }显式配置触发方式
真正卡住人的从来不是语法，而是误以为 “写了 <math></math> 就等于渲染成功”——得先确认浏览器开了开关，再检查命名空间，最后看 DOM 是否真存在节点。这三步跳过任意一步，公式就永远躺在源码里不动。
