mathjax 渲染公式在 safari/firefox 中不一致的根本原因是浏览器底层引擎（webkit/gecko）对 svg 布局、字体加载和 baseline 对齐的处理差异；解决方案是强制使用 svg 输出、禁用 fontcache、添加 safari/firefox 特定 css 修复，并确保字体资源正确加载。
math-style 不是标准 CSS 属性，它属于 MathML 渲染上下文或特定数学排版库（如 MathJax）的内部行为控制项，浏览器原生不识别 math-style 这个 CSS 声明。你在 Chrome（Blink）里看到它“生效”，大概率是 MathJax v3 的 DOM 渲染层在 JS 运行时动态设置了内联样式或 class，而非 CSS 引擎直接解析了该属性。
所以问题本质不是“如何让 math-style 兼容 Safari / Firefox”，而是：如何确保 MathJax 渲染出的数学公式，在 WebKit（Safari）和 Gecko（Firefox）中视觉一致、布局稳定、字体可读。
为什么 Safari 和 Firefox 里公式看起来“歪了”或“挤在一起”？
这不是 math-style 缺失导致的，而是以下三个底层差异叠加的结果：
- WebKit 对
<mrow></mrow>、<msup></msup>等 MathML 元素的 baseline 对齐逻辑与 Blink 不同，尤其在行内公式中易造成换行错位或垂直偏移 - Firefox 默认禁用系统 MathML 渲染（即使启用，也不支持 OpenType MATH 表），完全依赖 MathJax 的 SVG 或 HTML-CSS 输出；而 Safari 的原生 MathML 支持有限且不稳定，MathJax 会 fallback 到 SVG 模式，但 SVG 渲染路径在 WebKit 中存在缩放/像素对齐 bug
- MathJax v2 默认使用 HTML-CSS 输出，v3 默认用 SVG；但 SVG 模式在 Safari 16.6+ 中有
transform重绘抖动，Firefox 则对font-feature-settings在 math 字体中的应用更保守
MathJax v3 配置必须显式指定输出处理器
不要依赖自动探测。在初始化时强制指定兼容性更强的后端：
MathJax = {
loader: {load: ['[tex]/autoload']},
tex: {inlineMath: [['$', '$'], ['\(', '\)']]},
chtml: {scale: 1.0}, // 仅当用 CHTML 输出时启用
svg: {
fontCache: 'none', // Safari 下禁用 fontCache 可避免 SVG 字体加载失败
scale: 1.0
},
options: {
enableEnforcement: true
}
};
关键点：
- 如果目标是 Safari + Firefox 兼容优先，**用
svg输出（不是默认的chtml）**，因为 SVG 在 WebKit/Gecko 中渲染一致性远高于 HTML-CSS - 务必设置
fontCache: 'none'：Safari 会缓存 SVG 字体映射表，旧缓存可能导致符号缺失或乱码 - 避免在 CSS 中对
.mjx-math设置font-size或line-height，MathJax 自己计算尺寸；若需缩放，统一用svg.scale或chtml.scale
手动修复 Safari 中公式换行断裂问题
现象：长公式在 Safari 中断在不该断的位置，比如分数线上方空出大段空白，或下标被截断。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
原因：Safari 的 SVG foreignObject 容器对 white-space: nowrap 处理异常，且 MathJax 的 linebreaks 插件在 WebKit 中未触发正确断点。
解决方式（加在页面 中）：
style type="text/css">
.mjx-chtml .mjx-math { overflow-wrap: normal !important; }
.mjx-svg .mjx-math { display: inline-block !important; vertical-align: -0.1em; }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.mjx-svg .mjx-math { transform: translateZ(0); } /* 触发 Safari GPU 渲染，修复重绘撕裂 */
}
-
vertical-align: -0.1em是经验值，能对齐 Safari 中多数行内公式的基线 -
transform: translateZ(0)是 Safari 特定 hack，不加的话 SVG 公式在滚动或缩放时可能闪烁或错位 - 不要用
word-break: break-all—— 它会把x^2+y^2拆成x^2+换行，破坏数学语义
Firefox 下字体模糊或符号缺失怎么办？
现象：公式里的希腊字母、积分号显示为方块，或整体发虚。
根本原因是 Firefox 默认不加载远程字体（如 MathJax CDN 的 woff2），且对 @font-face 的跨域策略更严格。
- 确认你加载的是完整 MathJax 资源：
https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js（含字体）或tex-mml-svg.js（SVG 模式无需字体） - 如果用了自托管，检查服务器是否返回了正确的
Access-Control-Allow-Origin: *响应头，否则 Firefox 拒绝加载字体文件 - 禁用 Firefox 的“增强型跟踪保护”临时测试：地址栏右侧盾牌图标 → “禁用保护” → 刷新页面；若恢复清晰，说明是字体被拦截
- 终极降级方案：在 MathJax 配置中强制回退到 Unicode 字符渲染：
output: { font: 'STIX-Web' }（已弃用）或改用output: { font: 'TeX' }并搭配本地 TeX 字体包
真正难处理的不是写法差异，而是 MathJax 在不同引擎下选择不同渲染路径后，又叠加了各自对 SVG 布局、字体子集、CSS 变量继承的细微偏差。你得盯着 DevTools 里实际生成的 <svg></svg> 结构和 computed styles，而不是相信配置项名字听起来“应该管用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
