CSS 填充在 Outlook 中不起作用

Question

我在电子邮件模板中有以下 html。

我在 MS Outlook 和 gmail 中得到了不同的看法。

 <tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
    <span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span></td>
</tr>

如何解决这个问题？

原文由 Mukesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我改为关注，它对我有用

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
        <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">
            <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
            <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
        </table>
    </td>
</tr>

根据 Bsalex 请求更新实际发生的变化。 我更换了跨度标签

<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>

带有 table 和 td 标签如下

   <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">
      <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
      <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
   </table>

原文由 Mukesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不幸的是，当谈到 EDM（ 电子直邮）时，Outlook 是您最大的敌人。当单元格的内容决定单元格尺寸时，某些版本不考虑填充。

在邮件客户端中为您提供最 一致 结果的方法是使用空表格单元格作为填充（我知道，恐怖），但请记住用所需尺寸的空白图像填充这些表格，因为您猜对了，某些版本的 Outlook 不遵守空单元格的高度/宽度声明。

EDM 不好玩吗？ （不，他们不是。）

原文由 monners 发布，翻译遵循 CC BY-SA 4.0 许可协议