HTML邮件text-decoration: underline小写字母间空格无下划线问题求助

核心解决方案：用border-bottom替代text-decoration: underline #

在HTML邮件场景下，text-decoration: underline的渲染逻辑在不同客户端（尤其是Outlook这类）会跳过空格，而border-bottom作为元素的底部边框，会完整覆盖所有内容区域（包括空格），兼容性更好。

修改后的代码如下：

<td>
  <b><span style="border-bottom: 1px solid #1C2A5B; font-size:15px;font-family:Arial,Helvetica Neue,Helvetica,sans-serif; color: #1C2A5B; padding-bottom: 1px;">Estrogen-Alone Therapy</span></b>
</td>

• 添加padding-bottom:1px是为了让边框和文字保持合适的间距，避免贴得太近
• 边框颜色和文字颜色保持一致，模拟原生下划线的视觉效果

为什么text-decoration-skip-ink没用？ #

text-decoration-skip-ink是CSS3属性，绝大多数邮件客户端（比如Outlook全系列、部分Gmail版本）根本不支持这个属性，所以设置了也不会生效。而且它的作用是控制下划线是否穿过字母的下沉部分（比如g、y的下半段），和空格处的下划线显示无关，确实不是正确的解决方向。

排查方向补充 #

1. 多客户端测试：HTML邮件的渲染差异极大，必须在目标客户端（比如Outlook、Apple Mail、Gmail、国内主流邮箱等）逐一测试，确定是特定客户端的问题还是普遍问题
2. 检查字体影响：部分字体对下划线的渲染有特殊处理，换用系统默认字体（比如Arial、Helvetica）测试是否能缓解
3. 优先用基础CSS：邮件里尽量避免使用CSS3及以上的属性，这类属性的支持度极低，优先选择传统的布局和样式方案

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