现代主流浏览器原生支持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>）。

立即学习“前端免费学习笔记（深入）”；

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• <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>真实存在且结构合法。