math标签是HTML5中语义化包裹数学公式的容器，其渲染依赖浏览器MathML引擎支持，Chrome/Edge需手动开启实验功能，Firefox支持最完善，Safari需声明命名空间，且所有浏览器均要求结构完整、无HTML嵌套、CSS隔离。
math 标签是 HTML5 中用于包裹数学公式的原生语义化容器，它的作用不是“让公式显示出来”，而是“告诉浏览器：这里面是一段数学结构，按数学排版规则处理”。能不能渲染、怎么渲染、渲染成什么样，全看浏览器有没有实现 MathML 渲染引擎——这点常被当成“代码写错了”去排查，其实问题根本不在标签本身。
为什么math在Chrome/Edge里不显示
Chrome 109+ 和 Edge 109+ 确实启用了原生 MathML 支持，但默认只解析基础标签（如 mi、mn、mo、mfrac），且对嵌套深度、scriptlevel、menclose 等高级特性行为保守甚至静默忽略。更关键的是：Chrome/Edge 自 2023 年起在部分构建中默认禁用 MathML 引擎，即使写了合法的 math，也会直接跳过渲染逻辑。
- 检查是否启用：访问
chrome://flags/#enable-experimental-web-platform-features，开启后重启浏览器 - 验证支持：执行
typeof document.createElement('math').constructor，返回"MathMLElement"才算真正可用；若为"HTMLUnknownElement"，说明引擎未加载 - 不要依赖
innerHTML = '<math>...</math>'动态插入——某些版本会直接丢弃整个节点，必须用document.createElement('math')+appendChild显式构造
Firefox和Safari里math能用，但细节很脆
Firefox 的 MathML 引擎最成熟，支持绝大多数 Presentation MathML，包括 msqrt、mtable、maction；Safari（macOS 12+/iOS 14.5+）支持良好，但对 annotation-xml 或带 notation="longdiv" 的 menclose 容忍度极低，容易静默失败或错位。
-
msqrt在 Chrome 中可能把<mo>+</mo><mn>1</mn>拉进根号内，Firefox 则严格按 DOM 结构渲染——这意味着同一段math在不同浏览器里视觉结果可能不一致 - Safari 要求显式声明命名空间：
<math xmlns="http://www.w3.org/1998/Math/MathML">，省略后部分公式（尤其是含mfrac的）可能错行或截断 - 所有浏览器都要求
math必须闭合完整，<mi>x</mi><mo>+</mo>漏掉</mo>就会导致整块公式不渲染
别把math当LaTeX用，它不是语法糖
math 是结构描述语言，不是表达式简写。写 <msup><mi>x</mi><mn>2</mn></msup> 不等于写 x^2，前者定义了“x 是标识符、2 是数字、它们构成上标关系”，后者只是字符串。这种语义强度带来两个现实问题：
立即学习“前端免费学习笔记（深入）”；
- 写错一个标签名（比如把
mi写成it）不会报错，但整个公式变成未识别 XML，浏览器直接跳过渲染 - 不能在
math内嵌套 HTML 标签（如<span>、<div>），否则解析中断；也不能把它包在<div style="display: flex">里——MathML 盒模型与 CSS Flex 不兼容，极易错位 - 想控制大小别用
font-size，它会破坏上下标基线；要用transform: scale(1.2)或设置math { font-size: 1.2em; }并确保父容器 line-height 合理
真正卡住人的从来不是 math 标签怎么写，而是误以为“写了就等于能用”。它需要浏览器开关打开、命名空间正确、DOM 构造无误、CSS 隔离干净——四个条件缺一不可。而 MathJax 或 KaTeX 把这些底层差异全收走了，换来的就是一句 $x^2 + 2x + 1$ 全平台跑通。要不要硬啃原生 math，得先问清楚：你是在做教育平台长期维护，还是赶一个明天上线的 demo。
