原生mathml是唯一兼顾语义、可访问性与无js渲染的方案；科学计数法需用包裹指数以确保跨浏览器一致，如106。

原生 MathML 是唯一能同时满足语义正确、可访问性达标、且不依赖 JS 渲染的方案；但科学计数法若用 <msup></msup> 硬套，极易因缺少 <mrow></mrow> 导致上标错位或跨浏览器渲染不一致。

为什么 <msup><mi>10</mi><mn>6</mn></msup> 在 Chrome 和 Firefox 里显示不同

问题不在浏览器“bug”，而在 MathML 解析逻辑差异：Chrome（109+）把 <mn>6</mn> 当作独立数字节点直接升幂，Firefox 则按规范要求——上标内容必须是**单个原子表达式**，否则可能截断或错行。没包 <mrow></mrow> 就等于没声明“这部分是一体的”。

• 错误写法：<msup><mi>10</mi><mn>6</mn></msup> → 可能渲染为 “10⁶” 或 “10 ⁶”（带空格）
• 正确写法：<msup><mi>10</mi><mrow><mn>6</mn></mrow></msup> → 明确绑定基底与指数
• 更严谨的科学计数法应拆解为 <mi>10</mi> × <msup><mi>10</mi><mrow><mn>6</mn></mrow></msup>，而非把 “10⁶” 当作一个 <mn></mn>

科学计数法在 HTML 中的三种可行路径对比

不是所有场景都值得上 MathML。简单展示、低交互需求时，轻量方案反而更稳。

• <sup></sup> + 文本：适合静态页面、兼容性要求极高的环境（如嵌入旧 CMS），但无法读屏、无语义、1e6 必须手动转成 10<sup>6</sup>
• MathML <math></math>：语义完整，支持缩放/高对比度/语音朗读，但需确保文档是 ，且不能包裹在 <code><pre class="brush:php;toolbar:false;"></pre> 或 <code> 里
• MathJax + LaTeX：$10^6$ 最省力，自动处理 <mrow></mrow>、脚本层级、间距，但加载延迟、JS 失效即退化为源码

<mo>&InvisibleTimes;</mo> 比空格更可靠的原因

写 10<sup>6</sup> 看似简洁，但乘号缺失会让公式失去运算结构。用空格代替乘号（如 10<sup>6</sup>）会导致：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 读屏器跳过空格，念成 “十六” 而非 “十的六次方”
• 浏览器对空格的渲染宽度不一致，Firefox 可能比 Chrome 多占半个像素
• CSS letter-spacing 会意外影响空格，破坏对齐

而 <mo>&InvisibleTimes;</mo> 是 MathML 官方定义的“隐形乘号”，它参与排版计算但不显示，且被所有支持 MathML 的浏览器识别为二元运算符，自动控制左右间距。

容易被忽略的布局陷阱：行内公式 vs 块级公式

哪怕只写一个 <math><msup><mi>x</mi><mrow><mn>2</mn></mrow></msup></math>，也要主动设 display 属性：

• 行内公式必须加 display="inline"，否则某些 Safari 版本会强制换行
• 块级公式要配 display="block" + style="margin: 1em auto;"，仅靠 CSS text-align: center 对 <math></math> 无效
• 别碰 <math></math> 的 line-height —— 它不会生效；调行距请改父容器的 line-height

复杂公式的排版稳定性，80% 取决于是否显式分组、是否声明 display 类型、是否用对 token 标签，而不是字体大小或颜色。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！