原生标签不能开箱即用，Firefox接近稳定，Chrome/Edge默认禁用MathML引擎，Safari需严格声明命名空间且对复杂结构容忍度低；必须显式添加xmlns和display属性，漏闭合子标签或未启用实验功能均导致整块不渲染且无报错；生产环境推荐MathJax替代。
原生 <math></math> 标签在当前主流浏览器中**不能当作“开箱即用”的渲染方案**，Firefox 是唯一接近稳定支持的，Chrome/Edge 默认禁用，Safari 要求严格命名空间且对复杂结构容忍度低——别指望写了就显示。
为什么<math></math>在 Chrome 里完全不渲染
不是代码写错，是 Chrome 自 2023 年起默认关闭 MathML 渲染引擎。即使 DOM 中存在 <math></math> 节点，浏览器也会跳过排版逻辑，只留空白。
- 验证方式：打开
chrome://flags/#enable-experimental-web-platform-features，启用后重启；再执行typeof document.createElement('math').constructor，返回"MathMLElement"才算真正可用 - 动态插入风险：
element.innerHTML = '<math><mi>x</mi></math>'可能直接丢弃整个节点，必须用document.createElement('math')+appendChild显式构造 - 哪怕开启实验功能，
<mfrac></mfrac>分母对齐、<msqrt></msqrt>的根号包裹范围等细节仍保守处理，和 Firefox 表现不一致
<math></math> 必须加 xmlns 和 display 属性
HTML5 允许省略命名空间，但实际兼容性极差：Safari 对不带 xmlns="http://www.w3.org/1998/Math/MathML" 的 <math></math> 容易错行或截断；所有浏览器都要求显式声明 display，否则行为不一致（Chrome 当块级，Firefox 可能当行内）。
- 行内公式必须写：
<math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mi>x</mi><mo>→</mo><mn>0</mn></math> - 独立公式推荐写：
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">...</math>，再配 CSSmath[display="block"] { margin: 1em auto; } - 漏闭合任意子标签（如
<mo>+</mo>写成<mo>+</mo>）会导致整块公式不渲染，且控制台无报错
哪些 MathML 元素真正在各浏览器里可靠
别碰 <maction></maction>、<menclose notation="longdiv"></menclose>、<annotation-xml></annotation-xml> —— Chrome 支持率约 60%，Safari 对这些基本静默失败，Firefox 虽能解析但屏幕阅读器兼容性差。
立即学习“前端免费学习笔记（深入）”；
- 安全可用的最小集：
<mi></mi>（变量）、<mn></mn>（数字）、<mo></mo>（运算符）、<mfrac></mfrac>（分式）、<msup></msup>（上标）、<msqrt></msqrt>（平方根） -
<mfrac></mfrac>子元素顺序固定：<mfrac><mi>a</mi><mi>b</mi></mfrac>是 a/b，颠倒就是 b/a -
<mfenced></mfenced>自动加括号，但括号大小随内容缩放，不适用于需要固定尺寸的场景
真正在生产环境该怎么做
放弃把 <math></math> 当主力渲染手段。它语义强、写法反直觉、调试无错误提示、跨浏览器效果不可控——一个 <msqrt></msqrt> 漏闭合，整段白写。
- 首选 MathJax：
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>，自动识别<math></math>和 LaTeX，fallback 稳定，中文混排友好 - 若追求速度且公式来源可控（如后台已转好 LaTeX），选 KaTeX，但它**完全不解析
<math></math>标签**，必须用katex.render('x^2', element)或$$x^2$$块 - 服务端生成 MathML 时最容易漏三件事：没声明
xmlns、没闭合子标签、把&等字符当原始文本写进<mtable></mtable>—— 这些都会导致 Safari 静默失败
最常被忽略的点：不是“怎么写对”，而是“怎么确认它真被渲染了”。得先查 chrome://flags，再看 DOM 是否存在，最后测 Firefox/Safari/Chrome 三端表现——跳过任意一步，公式就永远停在源码里。
