原生 <math> 标签在 HTML 中可用但不可靠，因浏览器支持差异大：Chrome 自 2023 年默认禁用 MathML，Firefox/Safari（macOS/iOS 14.5+）支持较好；需显式声明 xmlns 和 display，避免 Flex 布局干扰，复杂公式须用 <mrow> 分组，推荐使用 MathJax 保障兼容性。
原生 <math> 标签在 HTML 文档中能用，但不能默认信任它会渲染——是否生效取决于浏览器版本、启动开关、命名空间声明和标签嵌套精度，不是写完就显示。
为什么<math>在Chrome里不显示却没报错
Chrome 自 2023 年起默认禁用 MathML 渲染引擎，即使 DOM 中存在 <math> 节点，也会跳过排版直接留空。这不是解析失败，而是被主动忽略。
- 检查方式：
document.createElement('math').tagName返回undefined表示未启用；返回"MATH"才说明基础支持已加载 - 临时开启（仅开发验证）：访问
chrome://flags/#enable-experimental-web-platform-features，启用后重启浏览器 - 生产环境不可依赖此开关——用户不会自己开 flag
- Firefox 和 Safari（macOS/iOS 14.5+）无需手动开启，但 Windows Safari 仍无支持
<math>必须显式声明xmlns和display
HTML5 允许省略命名空间，但 Chrome/Safari 在严格解析模式下会静默丢弃未声明 xmlns 的 <math>；不设 display 属性则行为不一致：Chrome 当块级、Firefox 当行内，导致段落断行或公式挤在一起。
- 安全写法：
<math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"></math>（行内）或display="block"（独占） - 不要把
<math>套在<div style="display: flex">里——MathML 内部盒模型与 CSS Flex 不兼容，易错位 - 避免在服务端模板中自动转义
<或>，否则生成的是字符串而非真实标签
复杂公式必须用<mrow>分组，不能靠浏览器自动推断
嵌套结构（如分式中的上下标、带括号的矩阵元素）若不显式包裹 <mrow>，不同浏览器会按各自规则合并节点，结果可能完全错乱。
立即学习“前端免费学习笔记（深入）”；
- 错误：
<msup><mi>e</mi><mfrac><mn>1</mn><mi>x</mi></mfrac></msup>→ Chrome 可能把整个分式当上标，Firefox 只升幂号 - 正确：
<msup><mi>e</mi><mrow><mfrac><mn>1</mn><mi>x</mi></mfrac></mrow></msup> - 矩阵必须配
<mfenced>+<mtable>：<mfenced><mtable><mtr><mtc><mi>a</mi></mtc></mtr></mtable></mfenced>（注意是<mtc>不是<mi>） -
<mi>、<mn>、<mo>三者不能混用：变量用<mi>x</mi>，数字用<mn>2</mn>，加号用<mo>+</mo>；混用会导致语义丢失、读屏器误读、间距异常
别硬扛兼容性，MathJax 是当前最稳的落地方案
原生 MathML 的“标准”不等于“可用”，尤其涉及 <mtable>、<msqrt> 多层嵌套、<semantics> 语义标注时，各浏览器支持度差异极大（Chrome 仅覆盖约 60% MathML 3.0 特性）。
- 最简接入：
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>，它自动识别并重绘所有<math>块 - 动态插入公式后需调用：
MathJax.typeset([domElement])，否则不触发渲染 - 若项目已用 KaTeX，注意它**不解析
<math>标签**，必须转成 LaTeX 字符串（如$$a^2 + b^2 = c^2$$）再喂给katex.render() - 真正容易被忽略的点：MathJax 默认等待 DOMContentLoaded，若页面用
defer加载脚本，需确保 MathJax 在所有公式节点挂载后再执行
