Outlook 2016中的HTML CSS布局

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

意图：按钮有一个小边框（可以使用）。暴露该边界的div是元素的容器（因此可以单击整个区域）。此外，整个区域应填充颜色（红色和绿色）

不幸的是，可点击区域仅限于文本（批准、拒绝）和上下几个像素，而不是整个“按钮区域”。此外，正如您所看到的，颜色也不会覆盖整个区域

---

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

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>

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

<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>

结果是：

---

您可以在这里找到一些非常好的信息：

您最近过得怎么样？@xxxmatko抱歉，忘记将问题标记为已回答-谢谢您的努力！：）欢迎你，祝你快乐。