HTML Outlook 电子邮件中的格式不正确

Question

所以 outlook 格式很有趣，我一直在尝试各种方法来解决我面临的问题，但似乎没有任何效果。我试过使宽度超小。我试过定义按钮的所有 4 个面。我已经阅读了大约 15 篇关于 outlook html 格式的不同 SO 帖子，但它似乎没有向我展示任何见解。

问题 -

我的按钮的填充显示不正确
我的粗黑线完全没有显示出来。

原码：

<div style="text-align:center">
    <div>
        <a href="https://mycanvasannuity.com?src=regEmaillnk">
        <img src="https://canvas.azureedge.net/canvas-annuity-logo.png" alt="Canvas welcomes you!">
        </a>
    </div>
    <div style="background-color:#000000; height:10px; width:100%; text-align:center;">
    </div>
    <br>
    <br>
    <div>
        <p>You have a new task assigned for application [AppID].  Please log into the Canvas Applicant Dashboard to complete this task at your earliest convenience. </p>
    </div>
    <br>
    <br>
    <a style="background-color: black; padding: 1.5em 1.5em; color: white; text-decoration: none;" href="https://applicant.canvasannuity.com/">Applicant Dashboard</a>
    <br>
    <br>
    <br>
    <br>
    <div style="background-color:#000000; height:10px; width:100%; text-align:center;">
    </div>
    <br>
    <br>
</div>

Answer 1

如果您需要支持任何版本的 Outlook，那么您将不得不使用图像和布局 -tables，这很痛苦。除了 table 个单元格之外，填充和边距属性不会始终如一地工作。

您需要用图片替换按钮并添加替代文字。另一种方法是尝试使按钮成为具有背景颜色的 table 单元格，但我认为图像选项更清晰。

对于您的 div 元素（粗黑线），您需要将它们变成 table。完成后，您可以使用 background-color.

设置内联样式

基本上，您必须像 2005 年一样编写 HTML/CSS。就个人而言，我发现 Campaign Monitor CSS Reference 在编写电子邮件设计时非常宝贵。

HTML Outlook 电子邮件中的格式不正确

HTML Format in Outlook Email Incorrect

html

outlook