现代主流浏览器原生支持mathml，但需用标签、声明doctype、显式设置display属性，并确保标签正确嵌套；不支持时可用mathml.js降级。
HTML里直接写<math></math>标签不渲染？先确认浏览器支持
现代主流浏览器（Chrome 104+、Firefox 102+、Safari 16.4+）原生支持 MathML，但必须用<math></math>标签且放在内——不是所有 HTML 模板都默认启用，尤其旧项目或某些 CMS 输出的页面可能被自动过滤掉<math></math>。遇到公式不显示，先打开开发者工具检查元素是否存在；如果存在却空白，大概率是浏览器版本太低或文档类型没设对。
确保文档开头有标准声明：
<!DOCTYPE html>，且不要混用 XHTML 语法（比如自闭合
<mi></mi>），MathML 在 HTML5 中必须用完整闭合标签。
用<math></math>写行内公式，别漏掉display="inline"
默认<math></math>是块级行为，会强制换行，破坏段落流。要在文字中间插入公式（比如“当<math display="inline"><mi>x</mi><mo>→</mo><mn>0</mn></math>时”），必须显式加<code>display="inline"属性。
-
display="block"：适合独立公式，居中、上下留白 -
display="inline"：嵌入文本，但需注意字体大小继承问题（父元素font-size会影响<mi></mi><mn></mn>等） - 不写
display属性时，不同浏览器表现不一致，Chrome 当block，Firefox 可能当inline——必须显式声明
常见 MathML 元素怎么选：从<mi></mi>到<mfenced></mfenced>
MathML 不是 LaTeX，没有宏包，靠语义化标签组合。写错标签名或嵌套层级，公式就乱码或报错（如Unknown element 'mfrac'说明拼错了<mfrac></mfrac>）。
立即学习“前端免费学习笔记（深入）”；
-
<mi></mi>：变量名（x、α）、函数名（sin），斜体，自动加空格 -
<mn></mn>：数字（2、3.14），正体 -
<mo></mo>：运算符（+、=、−），自带间距逻辑 -
<mfrac></mfrac>：分数，子元素顺序固定——<mfrac><mi>a</mi><mi>b</mi></mfrac>，不能颠倒 -
<mfenced></mfenced>：自动加括号，<mfenced><mi>x</mi><mi>y</mi></mfenced>渲染为(x, y)，括号大小随内容缩放
IE 和老版 Safari 怎么办？别硬扛，用mathml.js降级
IE 完全不支持 MathML，Safari 15 及更早版本对<msup></msup><msub></msub>等支持不全。强行用 polyfill（如mathjax）会拖慢首屏、干扰 SSR。更轻量的做法是检测支持后动态加载：
用document.createElement('math').namespaceURI判断是否原生支持，返回null就加载mathml.js（轻量 MathML 渲染器，仅 12KB）并把<math></math>转成 SVG。
别用MathJax.Hub.Config全局初始化——它会劫持所有<math></math>，连你后面手动插入的都绕不开，导致 SSR 页面水合失败。
MathML 的坑不在语法多难，而在“看起来写了，其实没生效”——浏览器静默忽略错误标签、CSS 覆盖了font-family导致符号变方块、服务端模板引擎删掉了<math></math>标签。上线前务必在目标浏览器里右键“查看网页源代码”，确认<math></math>真实存在且结构合法。
