安卓端Chrome浏览器text-underline-position: under不生效问题咨询

• 安卓端Chrome对text-underline-position: under的支持存在RTL（从右至左）文字场景兼容bug，即使是93及以上版本也未完全修复，针对波斯语这类非拉丁文字的下伸区域计算错误，导致下划线穿过字符、位置偏移。
• 安卓系统未预置Calibri字体，系统自动 fallback 的本地字体下划线基准参数与Calibri不符，进一步放大了原生下划线的位置异常。
• 代码未显式声明行高，默认紧凑行高会导致下划线超出文字行盒范围，出现截断问题。

方案1（兼容性最优，优先推荐）：使用边框模拟下划线 #

完全规避原生下划线的兼容性问题，所有浏览器、所有文字场景均可正常生效，还可自由调整下划线的粗细、间距：

a {
  font: bold 32px Calibri, "Noto Naskh Arabic", Roboto, sans-serif;
  color: black;
  text-decoration: none; /* 关闭原生下划线 */
  border-bottom: 2px solid #000; /* 模拟下划线，可调整粗细和颜色 */
  padding-bottom: 3px; /* 调整这个数值即可控制下划线和文字的间距，避免穿过字符 */
}

方案2（保留原生下划线）：补充兼容属性修复 #

如果必须使用原生下划线，可补充以下属性修复渲染异常：

a {
  font: bold 32px Calibri, "Noto Naskh Arabic", Roboto, sans-serif;
  color: black;
  text-underline-position: under;
  line-height: 1.6; /* 增加行高避免下划线截断 */
  text-underline-offset: 4px; /* 显式指定下划线偏移距离，安卓Chrome 96+支持 */
  text-decoration-skip-ink: none; /* 关闭下划线自动跳过字符的逻辑，避免不规则截断 */
}

该方案对低于96版本的安卓Chrome兼容度一般，低版本场景下仍建议使用方案1。

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