MathML在现代浏览器中可原生使用，需正确声明命名空间、规范标签嵌套及语义化使用mi/mn/mo；Chrome、Firefox、Safari支持度存在差异，尤其Safari对annotation-xml容忍低，Chrome 109+启用原生支持但渲染细节较保守。
MathML 在现代浏览器里能直接用，但得写对结构
HTML5 原生支持 math 元素和 MathML 语法，不需要额外库——前提是浏览器没禁用、标签嵌套合法、命名空间正确。Chrome/Firefox/Safari（macOS/iOS）都支持，但 Safari 对 <annotation-xml></annotation-xml> 等辅助节点容忍度低，容易静默失败。
常见错误现象：Uncaught DOMException: Failed to execute 'appendChild' on 'Node' 或公式完全不渲染，只显示空行或原始 XML 标签。
- 必须用
<math xmlns="http://www.w3.org/1998/Math/MathML"></math>显式声明命名空间（即使 HTML5 文档） -
<mi></mi>用于变量（如x），<mn></mn>用于数字（如2），<mo></mo>用于运算符（如+、=），混用会触发解析警告 - 避免在
<math></math>外层包裹<div> 后再设 <code>display: flex—— MathML 渲染器对 CSS 排版敏感，容易错位或截断Firefox 和 Chrome 渲染行为差异明显
Firefox 内置 MathML 引擎较成熟，支持大部分 Presentation MathML；Chrome 自 109 版起启用原生 MathML（非 MathJax 回退），但对
<mfrac></mfrac>的分母对齐、<msup></msup>的上标偏移等细节处理更保守。使用场景：需要跨浏览器一致显示分式、根式、矩阵时，不能只测一个浏览器。
立即学习“前端免费学习笔记（深入）”；
- Chrome 中
<msqrt><mi>x</mi><mo>+</mo><mn>1</mn></msqrt>会把+1拉进根号内，Firefox 则严格按结构渲染 - 若需兼容旧版 Chrome（window.MathMLElement 是否存在，不存在则降级为 SVG 或图片
- 不要依赖
font-family: "STIXTwoMath"这类字体名——系统未安装时 fallback 不稳定，优先用math通用字体族
MathML + CSS 微调必须避开重排陷阱
MathML 元素默认是 inline-level，但内部盒模型和普通文本不同。强行用
margin、transform或vertical-align容易导致公式断裂、上下标错位，尤其在响应式布局中。性能影响：对含多个
<mtable></mtable>的矩阵应用transition: all，可能触发整块重排重绘，卡顿明显。- 调整行距用
line-height作用于父容器，而非直接设在<math></math>上 - 缩放公式统一用
scale()transform，别用font-size—— 后者会改变字符基线，使上下标漂移 - 避免给
<mo></mo>单独加padding：运算符间距应由scriptlevel和scriptminsize控制
服务端生成 MathML 时最容易漏掉的三件事
后端模板（如 Django、Nunjucks）或静态站点生成器输出 MathML 时，常因转义、编码、上下文缺失导致前端解析失败。
容易踩的坑：公式在源码里看着正常，浏览器开发者工具里却显示为纯文本。
- 确保 HTTP 响应头含
Content-Type: text/html; charset=utf-8，否则−这类 Unicode 字符可能被误读 - 模板引擎自动转义会把
<mi>x</mi>变成<mi>x</mi>，必须显式标记“安全”或关闭该段内容转义 - 如果公式来自用户输入（如 Markdown 扩展），需白名单过滤 MathML 标签 ——
<annotation-xml></annotation-xml>可注入脚本，且多数浏览器不拦截
最麻烦的不是写不出来，是写出来之后在某个浏览器里少了一条横线、多了一个空格、或者整个
<mfrac></mfrac>被当成普通文本吞掉。检查时盯住开发者工具的 Elements 面板，确认节点真实存在且 namespace 正确，比看渲染结果更可靠。 - Chrome 中
