仅Outlook 365 for Mac中HTML邮件CTA按钮异常问题

布局实现逻辑 #

我在HTML邮件中采用**伪绝对定位（faux absolute）**布局实现带圆角的内容模块背景：

• 将内容容器设置为max-height="0"，内容本身保留正常样式
• 下方的<td>元素设置背景色、固定高度与宽度，作为上方内容的“背景层”
• 在Outlook VML环境中，通过给内容容器添加position: absolute属性，同时为下方带颜色的roundrect对象指定高度，即可实现正常显示

出现的问题 #

Outlook for Mac客户端中，CTA按钮显示异常：完全忽略CTA表格及内部<td>的宽高设置，仅显示嵌套<a>标签的背景色。其他所有客户端（包括全版本Windows Outlook）均显示正常。推测该问题与父容器的max-height="0"设置直接相关。

已尝试的无效修复方案 #

为恢复CTA按钮的正常尺寸，我尝试了多种方法，但均未生效：

• 直接给CTA表格、<td>设置宽高、内边距属性
• 尝试添加各类webkit私有属性
• 使用针对性CSS适配Office 365 for Mac：

#converted-body .cta-outlook {
  /* 自定义样式 */
} 

显示效果对比 #

• 正常显示的MacOS CTA按钮（Email on Acid测试截图）
• 异常显示的Office 365 for Mac CTA按钮（Email on Acid测试截图）

完整代码 #

完整HTML邮件代码已整理在指定仓库目录中

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