HTML电子邮件中表格单元格的Outlook崩溃

时间:2011-06-17 18:01:46

标签: outlook html-email html-rendering

我遇到过这个问题,但还未能找到解决方法。使用html电子邮件,我发现在某些Outlook程序中它会崩溃单元格。 2007/2010两者例如:

<tr>
    <td width="10"><img></td>
    <td width="80">Copy</td>
    <td width="10"><img></td>
</tr>

Outlook会忽略中间列单元格的宽度。如果我使用CSS作为宽度也没关系。

<tr>
    <td style="width:10px;"><img></td>
    <td style="width:80px;">Copy</td>
    <td style="width:10px;"><img></td>
</tr>

这有相同的结果。

我无法弄清楚的是,Outlook中的设置会导致单元格宽度的折叠。通常,它只发生在我们公司的首席执行官的Outlook中。我不再用这种方式编写带有副本的单元格,因为我有更坚固的方式可行,但有时营销认为他们知道他们在做什么并改变我认为它会起作用的代码,当我知道它会不是在Outlook的CEO电脑上。

有人知道Outlook中的设置会导致这种情况吗?我很想在我的电脑上安装这个设置,所以我不需要首席执行官来测试它。

2 个答案:

答案 0 :(得分:0)

你能提供一个更广泛的代码示例w /整个表而不只是一行吗?将有助于弄清楚为什么会发生这种情况。

无论如何,在Outlook中对我有用的东西是在表格中添加一个顶行,强制列宽度达到精确高度。一个1x1透明GIF,除了表格单元格宽度之外还设置了宽度,似乎可以作为一种“强力”方法,甚至可以监听Outlook:

<table>
  <tr>
    <td width="10" height="1"><img width="10" height="1" /></td>
    <td width="80" height="1"><img width="80" height="1" /></td>
    <td width="10" height="1"><img width="10" height="1" /></td>
  </tr>

然后下面的行符合该顶行的列宽。

答案 1 :(得分:0)

我在Outlook 2013 for Windows中遇到了此问题。它在Outlook for Mac(和Gmail,以及几乎所有其他现代电子邮件客户端)中运行良好,但在Outlook 2013 for Windows中,它会彻底崩溃一切。

解决方案很简单:如果要声明像素宽度(内联样式除外),请不要输入px。你必须真的是老派。这是我的最终(工作)代码:

    <table cellspacing="0" cellpadding="0" border="0">
    <tr>

    <td width="1" align="left" valign="top" bgcolor="#ffffff"><img src="#"></td>
    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 1</a></span></td>

    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none; text-decoration: none;" href="#">SECTION 2</a></span></td>

    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 3</a></span></td>

    <td width="149" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 4</a></span></td>

    </tr>
    </table>