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

时间:2016-06-09 11:20:06

标签: html css css3

我想问一下,我如何强制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%,为什么?

1 个答案:

答案 0 :(得分:0)

电子邮件的HTML往往完全依赖于表格,因此您无法在divs内拥有td

然后,您需要使用原始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>

我建议您在HTML上阅读Campaign Monitor's guidelines电子邮件。