为什么我的 html 表格的内容不能在电子邮件中正确显示？

Question

我创建了一个表格来格式化这 4 个图像和文本块，并且所有内容都在 litmus 的浏览器预览中完美显示，但图像和文本在不同的电子邮件提供商预览中无法正确显示（或根本无法显示），在我发送到我自己的电子邮件的测试中也没有： outlook 365 on windows render
proper display, rendered OL Office 365 on mac 10.1

这些块没有圆角，每个链接的图像在单元格内被部分切断。我不确定问题出在哪里，因为根据试金石，代码中没有结束标签/其他错误。

我工作的公司使用表格来构建我们的电子邮件。因此，如果相关，这是整个电子邮件的较大表中的一个表。欢迎任何关于导致此问题的想法！

<table style="vertical-align: bottom; border:1px white; border-radius: 10px; cellpadding:10; cellspacing: 0; background: #ffffff; color: #005287; font-family: Arial, Helvetica, sans-serif; font-size: 16pt; font-weight: bold; line-height: .6">
  <tbody>
    <tr height="40">
      <td valign="bottom" style="border: 1px white; border-radius: 5px; cellpadding: 10px; width: 40px;">
      </td>
      <td style="border: 1px white; border-radius: 5px; width: 253px;">
      </td>
      <td style="border: 1px white; border-radius: 5px; width: 13px;">
      </td>
      <td style="border: 1px white; border-radius: 5px; width: 253px;">
      </td>
      <td style="border: 1px white; border-radius: 5px; width: 40;">
      </td>
    </tr>
    <tr height="165">
      <td style="border: 1px white; border-radius: 5px; width: 40;">
      </td>
      <td valign: bottom align="center" style="border: 1px white; border-radius: 5px; padding-bottom: 15px; width: 253px; background-color:#D7ECF8;">
        <img src="https://emailmarketer.png" width="229.5" height="110" /><br /><br /> Database Choices
      </td>
      <td valign="bottom" border="1px white" border-radius="5px" width="13">
      </td>
      <td align="center" style="border: 1px white; border-radius: 5px; padding-bottom: 15px; vertical-align: bottom; width: 253px; background-color:#D7ECF8;">
        <img valign="middle" src="emailmarketer.png" width="91" height="94" /><br /><br /> Powerful Performance
      </td>
      <td valign="bottom" border="1px white" border-radius="5px" width="40">
      </td>
    </tr>
    <tr height="13">
      <td valign="bottom" border="1px white" border-radius="5px" width="40">
      </td>
      <td valign="bottom" border="1px white" border-radius="5px" width="253">
      </td>
      <td valign="bottom" border="1px white" border-radius="5px" width="13">
      </td>
      <td valign="bottom" border="1px white" border-radius="5px" width="253">
      </td>
      <td valign="bottom" border="1px white" border-radius="5px" width="40">
      </td>
    </tr>
    <tr height="165">
      <td valign="bottom" border="1px white" border-radius="5px" width="40">
      </td>
      <td valign="bottom" align="center" style="width: 253px; border: 1px white; border-radius: 5px; padding-bottom: 15px; background-color:#D7ECF8;">
        <img src="https://emailmarketer.png" width="105" height="105" /><br /><br /> Flexible Deployment
      </td>
      <td valign="bottom" border="1px white" border-radius="5px" width="13">
      </td>
      <td align="center" align="center" style="width: 253px; cellpadding: 10px; border: 1px white; border-radius: 5px; valign: middle;  background-color:#D7ECF8;">
        <img src="https://emailmarketer.png" width="211" height="109" /><br /><br /> Scalability
      </td>
      <td valign="bottom" border="1px white" border-radius="5px" width="40">
      </td>
    </tr>
</table>

broken display, simulated OL Office 365 on windows 10 proper display, simulated OL Office 365 on mac 10.1

Answer 1

所有电子邮件客户端都可以并且将以不同方式呈现 html。例如 Outlook 使用 word 2007 中的 html/css 渲染引擎，这是微软发布的关于 Outlook 的内容。

https://docs.microsoft.com/en-us/previous-versions/office/developer/office-2007/aa338201(v=office.12)?redirectedfrom=MSDN

我确定其他电子邮件客户端也有其他引擎，但这就是该表可能看起来不像预期的原因。