为什么 Outlook 中的电子邮件模板与 Thunderbird 中的不同

Question

我有一些 php 代码，可以使用 PHPmailer 发送电子邮件。除了按钮之外，这封电子邮件看起来不错。我已经在 Thunderbird 115.7.0 中进行了测试，看起来不错。

在桌面版 Outlook 365 中，它看起来像这样：

我使用的代码是这个：

      <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
        <tr>
          <td bgcolor="#ffffff" align="left">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td bgcolor="#ffffff" align="left" style="padding: 10px 40px 30px 40px;">
                  <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="120px" align="center" style="border-radius: 5px;" bgcolor="#1FD67D"><a href="https://test.com/index.php?accept_id=%accept_unique_url%" target="_blank" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; padding: 15px 25px; display: inline-block; width:120px;">Accepteren</a></td>
                        <td width="20px">&nbsp;</td>
                        <td width="120px" align="center" style="border-radius: 5px;" bgcolor="#F2828D"><a href="https://test.com/index.php?decline_id=%decline_unique_url%" target="_blank" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; padding: 15px 25px; display: inline-block; width:120px;">Afwijzen</a></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>                 
      </table>

我使用内联 CSS，所以这不是问题，但 Outlook 365 中有些问题。

Answer 1

Outlook 不支持

border-radius

，所以你的圆角会是直的。这是因为 Outlook 使用 Word 作为电子邮件编辑器。您可能会在Outlook 2007 中的 Word 2007 HTML 和 CSS 渲染功能一文中找到受支持和不受支持的 HTML 元素、属性和级联样式表属性（是的，2007 年的大多数规则尚未消失）。

Answer 2

Outlook 不支持

display

任何类型的更改，或

border-radius

。

您的选择是：

1. 仅用于按钮周围的填充，将按钮放在表格中，或者使用 Mark Robbins 所解释的非常hacky和技术性的方法，在条件注释中使用 mso-text-raise https://www.goodemailcode.com /电子邮件代码/链接按钮
2. 对于填充和边框半径，使用 Outlook 特定的代码 VML，这在其他地方有解释，例如 outlook 中没有图像的圆角