math标签常“没反应”是因为浏览器对mathml支持碎片化且失败时静默丢弃；需用mrow显式分组、mfenced包裹矩阵、transform缩放而非font-size，并必须检测+降级。
math 标签能原生展示公式，但**直接写就渲染成功是小概率事件**——多数情况下页面空白、错位或只显示部分符号，且控制台不报错。
为什么 math 标签常“没反应”
浏览器对 MathML 的支持是碎片化的：Firefox 支持最全；Safari（macOS）尚可，iOS Safari 渲染卡顿明显；Chrome 109+ 虽宣称支持，但实际只覆盖约 60% 的 MathML 3.0 特性，像 menclose、maction、notation="longdiv" 这类标签大概率被忽略。更麻烦的是，失败时浏览器通常静默丢弃，不抛异常、不提示、不占 DOM 空间——你只能看到一片空白。
必须加 mrow 显式分组，否则嵌套必乱
复杂公式（如带括号的分式、指数含分式、多层根号）若不手动用 mrow 划定作用域，不同浏览器会按各自解析逻辑“猜”结构，结果不一致：
- 错误写法：
<msup><mi>e</mi><mfrac><mn>1</mn><mi>x</mi></mfrac></msup>→ Chrome 可能把整个分式当上标，Firefox 却只升<mn>1</mn> - 正确写法：
<msup><mi>e</mi><mrow><mfrac><mn>1</mn><mi>x</mi></mfrac></mrow></msup>→mrow明确包裹完整上标内容 - 矩阵必须用
<mfenced><mtable>...</mtable></mfenced>，不能靠 CSS 模拟表格
别信 font-size，缩放要用 transform: scale()
math 元素内部的上下标基线、分式横线位置由字体内置度量和 scriptlevel 控制，改 font-size 会破坏对齐：
- 行内公式统一放大：给外层
<span class="math-inline"><math>...</math></span>设transform: scale(1.2)，再配vertical-align: -0.25em微调基线 - 块级公式居中：用
<math display="block" style="margin: 1em auto;"></math>，但禁止在math上设line-height或padding - 绝对不要给
<mo></mo>加margin或padding——运算符间距由字体内置规则决定，硬加只会撑开空白
检测 + 降级不是可选项，是上线前提
生产环境不能裸用 math。必须在 JS 中检测是否可用，并准备 fallback：
- 检测方式：
typeof document.createElement('math').tagName === 'string'（注意不是=== 'MATH'，IE 下返回大写，现代浏览器小写） - 降级方案二选一：
– 简单场景：用<span class="math-fallback">E = mc^2</span>+ CSS 模拟排版
– 专业场景：检测失败后动态加载 MathJax 并用MathJax.tex2chtmlPromise()渲染原始 LaTeX 字符串 - 移动端特别注意：iOS Safari 对
math重排开销极大，若页面含<mpadded></mpadded>或动态 style，务必禁用user-scalable=no的 viewport，否则双击放大触发重绘卡死
math 标签，而是先判断环境、再约束结构、最后兜住退路——math 是能力，不是免检通行证。
