Chrome自2023年起默认禁用MathML,需通过chrome://flags启用;<math>必须声明xmlns和display属性,嵌套需<mrow>分组,token标签(<mi>/<mn>/<mo>)须严格区分。

<math> 标签能用,但不能默认认为它会显示——是否生效取决于浏览器版本、xmlns 声明、display 属性和嵌套结构精度,不是写完就渲染。
Chrome 里 <math> 不显示却没报错,怎么确认是不是被禁用了?
Chrome 自 2023 年起默认关闭 MathML 渲染引擎,DOM 中存在 <math> 节点也不会排版,只是留空。这不是解析错误,是主动跳过。
- 检查方式:
document.createElement('math').tagName返回"undefined"表示未启用;返回"MATH"才说明基础支持已加载 - 临时开启(仅开发验证):访问
chrome://flags/#enable-experimental-web-platform-features,启用后重启浏览器 - 生产环境不可依赖该开关——用户不会自己开 flag
<math> 必须显式声明 xmlns 和 display
HTML5 允许省略命名空间,但 Chrome/Safari 在严格解析模式下会静默丢弃未声明 xmlns 的 <math>;不设 display 则行为不一致:Chrome 当块级、Firefox 当行内,导致断行或挤在一起。
- 推荐写法:
<math xmlns="http://www.w3.org/1998/Math/MathML" display="inline">(行内)或display="block"(独占) - 不要把
<math>套在<div style="display: flex">里——MathML 内部盒模型与 CSS Flex 不兼容,易错位 - 避免用
<span><math>...</math></span>包裹再设display: block,应直接在<math>上设属性
复杂公式必须用 <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>——<mrow>明确告诉渲染器“这是完整上标内容” - 矩阵必须用
<mfenced><mtable>...</mtable></mfenced>,不能靠<mrow>拼接
token 类型必须严格区分:<mi>、<mn>、<mo>
变量、数字、运算符混用标签会导致语义丢失,渲染错乱或读屏器误读。
-
<mi>x</mi>:所有标识符——变量(x)、函数名(sin)、常量(π)、向量(𝔳) -
<mn>2</mn>:纯数值,包括小数(<mn>3.1416</mn>)、科学计数(<mn>6.022×10²</mn>) -
<mo>+</mo>:所有运算符、关系符、括号、分隔符(=、≠、(、,);连乘号用<mo>⁢</mo>而非空格
真正麻烦的不是写不对,而是写对了但浏览器不认——<math> 的脆弱性集中在命名空间、display、分组和 token 四个点上,缺一不可;任何一处松动,都可能让公式在某个浏览器里变成空白或乱码。



















