Outlook 2016 中的 HTML CSS 布局

Question

我想创建一封包含两个按钮的电子邮件，一个用于批准请求，另一个用于拒绝该请求。不幸的是，Outlook 不想按照我的意愿显示它们。

<table style="width: 250px;">
<tbody>
<tr>
<td><a style="display:inline-block;text-decoration:none;width:100%;height:100%" href="ApproveLink"><div style="padding:15px 32px 15px 32px;background:green;border:1px solid #ccc;vertical-align:middle;width:100px;text-align:center;height:45px;"><span style="color:white;font-weight:bold;">Approve</span></div></a></td>
<td><a style="display:inline-block;text-decoration:none;width:100%;height:100%" href="RejectLink"><div style="padding:15px 32px 15px 32px;background:red;border:1px solid #ccc;vertical-align:middle;width:100px;text-align:center;height:45px;"><span style="color:white;font-weight:bold;">Reject</span></div></a></td>
</tr>
</tbody>
</table>

意图:按钮有一个小边框(有效)。显示该边框的 div 包含一个元素(因此可以单击整个区域)。此外，整个区域应填充颜色(红色和绿色)。

不幸的是，可点击区域仅限于文本(批准、拒绝)和上下几个像素，但不是整个“按钮区域”。此外，如您所见，颜色也没有覆盖整个区域。

在普通的 html 编辑器中，一切都很好，所以 Outlook 是交易破坏者 - 但我如何让它工作？

Answer 1

Outlook 电子邮件中的链接或按钮非常棘手。创建看起来像按钮的链接的最佳方法是在特定于 Outlook 的条件注释中使用矢量标记语言 (VML) 作为 Microsoft Outlook 的后备，并为大多数电子邮件客户端设计链接本身的样式。像这样:

<table width="250px" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <div>
        <!--[if mso]>
          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="ApproveLink" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="3%" strokecolor="green" fillcolor="green">
            <w:anchorlock/>
            <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;font-weight:bold">Approve</center>
          </v:roundrect>
        <![endif]-->
        <a href="ApproveLink" style="mso-hide:all">Approve</a>
      </div>
    </td>
    <td>
      <div>
        <!--[if mso]>
          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="RejectLink" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="3%" strokecolor="red" fillcolor="red">
            <w:anchorlock/>
            <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;font-weight:bold">Reject</center>
          </v:roundrect>
        <![endif]-->
        <a href="RejectLink" style="mso-hide:all">Reject</a>
      </div>
    </td>   
  </tr>
</table>

这是结果:

这种技术的缺点是，必须设置按钮的宽度和高度，另一方面整个区域都是可点击的。

还有其他技术，例如基于填充或基于边框的按钮，但这次您面临的是整个区域不可点击的相同问题。

<table width="250px%" border="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td bgcolor="green" style="padding: 12px 18px 12px 18px; border-radius:3px" align="center">
                <a href="ApproveLink" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Approve</a>
            </td>
        </tr>
      </table>
    </td>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td bgcolor="red" style="padding: 12px 18px 12px 18px; border-radius:3px" align="center">
                <a href="RejectLink" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Reject</a>
            </td>
        </tr>
      </table>
    </td>   
  </tr>
</table>

这是结果:

您可以在这里找到一些非常好的信息:https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design