MathML公式默认偏上或换行，是因为<math>是inline-level元素但按数学基线（math axis）对齐，而非文本基线，且某些Safari版本会将其误判为块级；解决方法是显式设置display="inline"并配合vertical-align: middle。
MathML 公式在 里为什么总偏上或换行
默认情况下，<math> 是 inline-level 元素，但它的 baseline 对齐逻辑和普通文本不同——它会按数学符号的“数学基线”（math axis）对齐，而非文本基线，导致视觉上抬高或下沉。更糟的是，某些 Safari 版本（截至 2026 年 5 月）会把未声明 display 的 <math> 当作块级强行换行。
解决办法很直接：
- 所有行内公式必须显式加
display="inline"：<math display="inline"><msup><mi>x</mi><mrow><mn>2</mn></mrow></msup></math>
- 给包含公式的
<td> 加 vertical-align: middle，而不是依赖默认值
- 避免把
<math> 套在 <pre> 或 <code> 里——这两者会禁用 MathML 渲染
数字+单位+上标混排时小数点/符号不对齐
比如一列数据是 12.34 m、$567.89、10<sup>6</sup> Hz，单纯用 text-align: right 会让小数点、美元符、上标位置参差不齐。这不是 CSS 没设好，而是文本对齐天然无法处理“语义单元”的对齐。
真正有效的做法是分层处理：
立即学习“前端免费学习笔记（深入）”；
- 纯数字列（如 12.34、567.890）优先用
font-variant-numeric: tabular-nums，配合等宽字体（如 font-family: system-ui, 'Segoe UI', monospace）
- 带单位或符号的，拆成两个
<span>：一个放数值（右对齐 + tabular-nums），一个放单位（左对齐 + 固定宽度），再用 display: inline-flex 组合
-
<sup> 这类 HTML 上标要慎用——它不参与数学排版，读屏器可能念错；换成 MathML 的 <msup><mn>10</mn><mrow><mn>6</mn></mrow></msup> 更稳妥
表格里多个公式横向对齐（如等号对齐）
HTML 表格本身不提供公式级对齐能力，text-align 只能控制整格，没法让“f(x) = ...”里的等号纵向对齐。想做到这点，必须放弃单格放整行公式的老思路。
推荐组合方案：
- 每行公式拆成三列：
<td class="formula-left">f(x)</td><td class="formula-op">=</td><td class="formula-right">(x+a)(x+b)</td>
- 给
.formula-op 设 text-align: center + 固定最小宽度（如 min-width: 2em），防止等号被挤跑
- 若需跨多行推导，整个公式块用
<div> 包裹并设 display: flex，再用 flex: 1 控制各部分伸缩比——别指望 <table> 自动撑开对齐
MathML 中科学计数法渲染不一致
写成 <msup><mi>10</mi><mn>6</mn></msup> 看似省事，但在 Firefox 和 Chrome 里可能一个显示紧凑、一个带空隙——问题出在 <mn>6</mn> 不是原子节点，浏览器解析策略不同。
必须用 <mrow> 显式包裹指数：
<msup>
<mi>10</mi>
<mrow><mn>6</mn></mrow>
</msup>
更严谨的写法还要补隐形乘号：<mi>10</mi><mo>⁢</mo><msup><mi>10</mi><mrow><mn>6</mn></mrow></msup>，否则读屏器可能跳过运算关系。
最后提醒一句：MathML 要生效，页面必须是 <!DOCTYPE html>，且不能嵌套在 <pre> 或 <textarea> 里——这点容易被忽略，一粘贴就失效。
默认情况下，<math> 是 inline-level 元素，但它的 baseline 对齐逻辑和普通文本不同——它会按数学符号的“数学基线”（math axis）对齐，而非文本基线，导致视觉上抬高或下沉。更糟的是，某些 Safari 版本（截至 2026 年 5 月）会把未声明 display 的 <math> 当作块级强行换行。
解决办法很直接：
- 所有行内公式必须显式加
display="inline"：<math display="inline"><msup><mi>x</mi><mrow><mn>2</mn></mrow></msup></math> - 给包含公式的
<td>加vertical-align: middle，而不是依赖默认值 - 避免把
<math>套在<pre>或<code>里——这两者会禁用 MathML 渲染
数字+单位+上标混排时小数点/符号不对齐
比如一列数据是 12.34 m、$567.89、10<sup>6</sup> Hz，单纯用 text-align: right 会让小数点、美元符、上标位置参差不齐。这不是 CSS 没设好，而是文本对齐天然无法处理“语义单元”的对齐。
真正有效的做法是分层处理：
立即学习“前端免费学习笔记（深入）”；
- 纯数字列（如 12.34、567.890）优先用
font-variant-numeric: tabular-nums，配合等宽字体（如font-family: system-ui, 'Segoe UI', monospace） - 带单位或符号的，拆成两个
<span>：一个放数值（右对齐 + tabular-nums），一个放单位（左对齐 + 固定宽度），再用display: inline-flex组合 -
<sup>这类 HTML 上标要慎用——它不参与数学排版，读屏器可能念错；换成 MathML 的<msup><mn>10</mn><mrow><mn>6</mn></mrow></msup>更稳妥
表格里多个公式横向对齐（如等号对齐）
HTML 表格本身不提供公式级对齐能力，text-align 只能控制整格，没法让“f(x) = ...”里的等号纵向对齐。想做到这点，必须放弃单格放整行公式的老思路。
推荐组合方案：
- 每行公式拆成三列：
<td class="formula-left">f(x)</td><td class="formula-op">=</td><td class="formula-right">(x+a)(x+b)</td> - 给
.formula-op设text-align: center+ 固定最小宽度（如min-width: 2em），防止等号被挤跑 - 若需跨多行推导，整个公式块用
<div>包裹并设display: flex，再用flex: 1控制各部分伸缩比——别指望<table>自动撑开对齐
MathML 中科学计数法渲染不一致
写成 <msup><mi>10</mi><mn>6</mn></msup> 看似省事，但在 Firefox 和 Chrome 里可能一个显示紧凑、一个带空隙——问题出在 <mn>6</mn> 不是原子节点，浏览器解析策略不同。
必须用 <mrow> 显式包裹指数：
<msup> <mi>10</mi> <mrow><mn>6</mn></mrow> </msup>
更严谨的写法还要补隐形乘号：<mi>10</mi><mo>⁢</mo><msup><mi>10</mi><mrow><mn>6</mn></mrow></msup>，否则读屏器可能跳过运算关系。
最后提醒一句：MathML 要生效，页面必须是 <!DOCTYPE html>，且不能嵌套在 <pre> 或 <textarea> 里——这点容易被忽略，一粘贴就失效。
