Html 电子邮件模板 - Outlook 忽略元素的宽度

Question

我想问一下，如何强制 Outlook 遵守元素的宽度？

例如我在表中有一段代码:

<tr>
    <td width="100px" style="text-align: center">
        <div style="Margin-left: 20px;Margin-right: 20px;">
            <div class="divider" style="font-size: 2px;line-height: 2px;Margin-left: auto;Margin-right: auto;width: 40px!important;background-color: #ccc;Margin-bottom: 20px;">&nbsp;</div>
        </div>
    </td>
</tr>

divider 类的宽度为 40px，但在 outlook 中，div 的宽度为 100%，为什么？

Answer 1

电子邮件的 HTML 往往完全依赖于表格，因此您无法在 td 中包含 divs。

然后您需要使用原始 width 属性和内联 css 指定单元格宽度:

<td width="40" style="width: 40px;">Cell content</td>

为了真正安全，您可以走得更远，包括一个透明的 1x1 像素图像，然后您可以使用它来强制调整单元格的宽度。例如:

<td width="40" style="width: 40px">
  <img src="blank.gif" width="40" style="width: 40px;" />
</td>

我会推荐阅读 Campaign Monitor's guidelines在用于电子邮件的 HTML 上。