Windows 中 Outlook 上的表格宽度未占用指示的宽度

Question

我正在制作一个电子邮件活动，下面是 2 个按钮。我正在使用 Litmus 来测试它们，它们在每个平台上看起来都很好，除了 Windows 中的 Outlook。宽度只取内部文本的宽度，不取给定的宽度，即 336px。难道我做错了什么？

<table border="0" cellpadding="0" cellspacing="0" style="font-family: Avenir-Medium, Helvetica, sans-serif; box-sizing: border-box;">
  <tr>
    <td style="font-family: Avenir-Medium, Helvetica, sans-serif; box-sizing: border-box;">
      <a href="Foo" class="button button-green" target="_blank" style="display: block; box-sizing: border-box; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); color: #000000; background-color: #ffffff; border-top: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; width: 336px; height: 51px; border-radius: 4px; font-family: Avenir-Medium, Helvetica, sans-serif; text-decoration: none; -webkit-text-size-adjust: none; font-size: 20px; font-weight: 600; font-style: normal; font-stretch: normal; line-height: 49px; letter-spacing: normal; text-align: center; color: #000000;">Fooo</a>
    </td>
  </tr>
</table>


<table border="0" cellpadding="0" cellspacing="0" style="width: 336px; font-family: Avenir-Medium, Helvetica, sans-serif; box-sizing: border-box;">
  <tr style="width:336px">
    <td style="width: 336px; font-family: Avenir-Medium, Helvetica, sans-serif; box-sizing: border-box;">
      <a href="foo" class="button button-green" target="_blank" style="display: block; box-sizing: border-box; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); color: #ffffff; background-color: #f04b93; border-top: 10px solid #f04b93; border-right: 18px solid #f04b93; border-bottom: 10px solid #f04b93; border-left: 18px solid #f04b93; width: 336px; height: 51px; border-radius: 4px; font-family: Avenir-Medium, Helvetica, sans-serif; text-decoration: none; -webkit-text-size-adjust: none; font-size: 20px; font-weight: 600; font-style: normal; font-stretch: normal; line-height: 31px; letter-spacing: normal; text-align: center; color: #ffffff;">Foo</a>
    </td>
  </tr>
</table>

Answer 1

希望我能在这里提供帮助：

1. 不必费心在表格行上定义任何属性。您在表格行的第二个按钮上使用宽度不是有效的 HTML。坚持在表格和表格单元格上定义宽度。
   尽管在您的情况下，不需要在表格单元格上定义宽度，并且每个表格内只有一个表格单元格。您的表格单元格自然会继承父表格的宽度。

2. 显示块在 Outlook 中不会做任何事情。删除那些。

3. flexbox 和边框框在 Outlook 和大多数电子邮件客户端中不起作用，因此无需包含 box-sizing 属性。

4. 标签上的宽度在 Outlook 中也是多余的。删除那些。

5. 对于那些缺乏电子邮件开发经验的人来说，Outlook 中的按钮很棘手。您实际上需要一些 Outlook 特定代码来填充您的按钮。
   试试这个来自 Campaign Monitor 的电子邮件按钮生成器 - https://buttons.cm/

试一试按钮生成器，看看它如何为您工作 :)