Outlook 2007、2010 和 2013 不尊重 <td> 中的 valign

Question

我在这里设置了一个简单的测试：https://www.emailonacid.com/app/acidtest/display/summary/eypNVE82ae543QsSdfiYJlcLNqtcmvKz1ybIvJRlCPj2n/shared

简单的目标是让主要文本与其 TD 的顶部对齐，而 CTA 文本与其 TD 的底部对齐。如您所见，除了上面提到的 Outlook 之外，每个客户端都发生这种情况（此问题忽略移动设备）。 请注意，我们不知道 CTA 是否会超过一行，因此无法确定其高度。

下面我会贴出代码sn-p。

谢谢！ 唐

<table width=“640” border=“0” cellpadding=“0” cellspacing=“0”>
  <tr>
  <td valign=“top”>http://imgs.elainemedia.de/w4gu/f8451d426cd5373fde24a98fcf496945.jpg</td>
  <td valign=“top” bgcolor=”#000000”><table width=“100%” border=“0” cellspacing=“0” cellpadding=“0”>
      <tr>
      <td rowspan=“2” valign=“top”>http://imgs.elaine-asp.de/w4gu/1fce9767d9699082bfea5b0c475aece5.gif</td>
      <td valign=“top”>Buy a Pro’s Bike
        Ridden by the world’s finest, now available to you. With our Original Pro Bikes it’s easier than ever to own a unique piece of cycling history.</td>
      </tr>
      <tr>
      <td valign=“bottom” style=“color:#ffffff;”>CTA GOES HERE</td>
      </tr>
    </table></td>
  </tr>
</table> 

Answer 1

Valign 不起作用，因为您的内部表格高度未按比例放大到父 td 高度。

您遇到的问题是，没有确定的方法可以控制您的内部table 的高度以适应外部表（除了两个表中td 的固定高度之外）。我假设您正在尝试通过使用不可见的间隔 gif 图像来设置内表的高度，但是从您的 sn-p 我无法推断您是否设置了 img 标记的高度。

例子：

<img src="http://imgs.elaine-asp.de/w4gu/1fce9767d9699082bfea5b0c475aece5.gif" 
     height="260" width="1" style="display: block; border: none;" alt="" />

注意：如果上面的示例不起作用，请尝试将 spacer gif 原始图像大小从 1x1 更改为 10x10 像素。以下是来自this article explaining spacer gifs in Outlook的引用：

修复非常简单，不需要对消息标记进行任何更改。相反，只需将间隔 GIF 更改为 10 x 10 像素而不是 1 x 1。我认为 Outlook 可能正在寻找 1 x 1 的图像并以不同方式处理它们，可能是因为它们经常用作网络信标。 (...) 当然，您仍然可以将间隔 GIF 的 HEIGHT 和 WIDTH 设置为小于 10 x 10 的尺寸，因此仍然可以将它们设置为 1 x 1 并且它们仍然可以像以前一样工作。

另一种解决方案是完全删除内表，并重建外表如下：

<table align="center" border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"
       width="640" style="width: 640px; background-color: #000000;">
  <tr>
    <td valign="top" rowspan="2">
      <img src="http://imgs.elainemedia.de/w4gu/f8451d426cd5373fde24a98fcf496945.jpg" 
           width="460" height="280" style="display: block; border: none;" alt="">
    </td>
    <td valign="top" style="color: #ffffff;">
      Buy a Pro’s Bike<br>
      Ridden by the world’s finest, now available to you. 
      With our Original Pro Bikes it’s easier than ever to own 
      a unique piece of cycling history.
    </td>
  </tr>
  <tr>
    <td align="center" style="color: #ffffff;">
      <!-- note you can go any align/valign combination here -->
      CTA GOES HERE
    </td>
  </tr>
</table>

看看两者的比较。我添加了边框来说明td 和tables 如何相互堆叠。 https://jsfiddle.net/jtquaja1/2/

Answer 2

间隔图像是一个不错且简单的解决方案，但可能会由于 Outlook 忽略 html 图像大小调整、Outlook 对 image size based on DPI 的不同呈现以及图像阻塞或图像与文本的比例问题（ importance is up for argument currently)

虽然耗时且复杂，但最全面的跨电子邮件客户端替代方案是在每个表的上方和下方创建一行并使用高度（在 Outlook 中使用 mso-line-height-rule 用于小行）使每个表相同大小和内容居中。

示例：<tr><td height="10" style="font-size:10px; mso-line-height-rule:exactly; line-height:10px;"> </td></tr><tr><td>content goes here</td></tr> <tr><td height="10" style="font-size:10px; mso-line-height-rule:exactly; line-height:10px;"> </td></tr>

这也可以在 TD 上使用填充来完成，而不是使用新行。有些人认为这不是一个全面的解决方案，因为某些邮件客户端可能无法正确呈现填充。我个人使用填充方法，因为它对于响应式设计来说更高效、更可控，并且在任何电子邮件客户端或浏览器中都没有发现任何问题。

样本：<tr><td style="padding-top:10px; padding-bottom:10px;">content goes here</td></tr>

无论你选择什么，我最好的建议是测试、测试、测试和测试更多。