Mac与Android端Chrome浏览器中MathML矩阵类公式渲染异常问题

问题根源 #

WebKit最新版本对MathML矩阵相关标签（<mtable>、<mtr>、<mtd>）的布局计算逻辑做了调整，旧版JQMath的渲染逻辑未适配该变化，导致Mac（Safari）、Android（Chrome/WebView）平台出现渲染异常，Windows平台因内核差异不受影响。

具体修复步骤 #

• 优先升级JQMath到最新版本
  替换官方最新的jqmath-etc.min.js和jqmath.min.css文件，官方大概率已针对WebKit的更新发布了兼容补丁。

• 手动调整MathML矩阵结构
  给矩阵的<mtable>标签添加明确的对齐属性，强制WebKit按照指定规则渲染，避免自动计算错误。示例修改：
  原代码：

  <math>
    <mtable>
      <mtr><mtd>1</mtd><mtd>2</mtd></mtr>
      <mtr><mtd>3</mtd><mtd>4</mtd></mtr>
    </mtable>
  </math>
  

  修改后：

  <math>
    <mtable columnalign="center center" rowalign="baseline baseline">
      <mtr><mtd>1</mtd><mtd>2</mtd></mtr>
      <mtr><mtd>3</mtd><mtd>4</mtd></mtr>
    </mtable>
  </math>
  

• 添加WebKit专属CSS修复
  在页面CSS中添加针对WebKit内核的样式规则，强制修正矩阵单元格的布局：

  /* WebKit内核下JQMath矩阵渲染修复 */
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .jqmath mtable {
      border-collapse: separate !important;
      border-spacing: 0.2em 0.1em !important;
    }
    .jqmath mtd {
      text-align: center !important;
      padding: 0.1em 0.3em !important;
    }
  }
  

• 临时降级内核（仅应急用）
  若为移动端内嵌WebView应用，可临时指定WebView使用较低版本内核（Android可通过WebViewCompat配置，Mac内嵌WebView可调整SDK版本），但此方案仅作过渡，长期需依赖JQMath更新或替换引擎。

• 替换渲染引擎（长期方案）
  若JQMath修复进度缓慢，可考虑迁移至MathJax或KaTeX，这两个工具对WebKit的兼容性更稳定，且持续更新活跃，能更好适配浏览器内核变化。

内容的提问来源于stack exchange，提问作者Kiran