0

我已经完成了一个电子邮件模板，该模板具有交替的行，其中包含两个块和一个大小的块：

[--][-]
[-][--]
[--][-]
[-][--]

我已经从 Outlook 中保存了源代码并在浏览器中打开它。所以我设法将问题缩小到以下代码区域（自动生成 - thx 老伙伴，Outlook！）：

// EXAMPLES OF THE LAST TWO ROWS
<tr>
    <td></td>
    <td colspan="2"></td>
</tr>
<tr>
    <td colspan="2"></td>
    <td></td>
</tr>

<!--[if !supportMisalignedColumns]-->
<tr height="0">
  <td width="256" style="border:none"></td>
  <td width="198" style="border:none"></td>
  <td width="256" style="border:none"></td>
</tr>
<!--[endif]-->

由于这些td元素的宽度，整体table失去了正确的尺寸。当我在 Firefox 中删除这些行时，table渲染完美。

是否有可能通过更改标记来防止这种行为？为什么 Outlook 还是要添加这个tr？

4

1 回答 1

1

我从来没有遇到过 Outlook 这样做的任何问题，所以我不确定为什么。不过，我可以分享我的方法，这可能是您正在做的事情，否则值得一试，看看它是否会给您带来不同的结果。

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td width="200"><!-- set col 1 -->
    </td>
    <td width="200"><!-- set col 2 -->
    </td>
    <td width="200"><!-- set col 3 -->
    </td>
  </tr>
  <tr>
    <td width="400" colspan="2" bgcolor="#454545"><!-- col 1 -->
      content
    </td>
    <td width="200"><!-- col 2 + 3 -->
      content
    </td>
  </tr>
  <tr>
    <td width="200"><!-- col 1 + 2 -->
      content
    </td>
    <td width="400" colspan="2" bgcolor="#454545"><!-- col 3 -->
      content
    </td>
  </tr>
</table>

您会注意到第一行是空的。在那里设置 cols 会迫使 colspan 表现出来。

于 2013-04-29T13:41:52.687 回答