仅 Outlook 365 for Mac 中存在 HTML 电子邮件按钮问题

Question

在一封 html 电子邮件中，我使用“伪绝对”为内容模块创建带有圆角的背景图像。 html 使用 max-height="0" 作为内容容器，内容的样式正常。内容下方的 td 被赋予背景颜色、高度和宽度，以便它充当上述内容的“背景图像”。这在 Outlook vml 中有效，方法是使用内容容器的绝对位置并为内容下方的彩色圆角对象分配高度。

问题：Outlook for Mac 在此设置中通过忽略表格的高度和宽度以及 CTA 的 td 来提升 CTA 按钮，仅显示嵌套标签的背景颜色。 CTA 样式在其他任何地方都能正确呈现，包括所有Windows 版本的 Outlook。我猜这与父容器的 0 高度有关。

我尝试了各种通过设置宽度和长度和/或填充样式来恢复 CTA 尺寸的方法，包括不同的 webkit 属性并尝试使用专门针对 Office 365 for Mac

#converted-body .cta-outlook {
  /* style */
} 

无济于事。

通过 Acid 上的电子邮件获得 MacO 中的 CTA 图像

通过 Acid 上的电子邮件查看 Office 365 for Mac CTA 的图像

GitHub 上整个 html 电子邮件文件的链接：https://github.com/iwcolyer/Email-Troubleshooting/blob/376a693cd4d57e957e2223b5df25aa45afbf8ad2/Broken-CTA-Faux-Absolute-BGorund-Office365-Mac

Answer 1

它就在那里（也在 Outlook Android 和 iOS 应用程序上），但它位于 绿色背景后面。

将绿色背景div移到内容之前，将最大高度交换到此，它就会显示。您还需要稍微更新一下背景颜色。