Question

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

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

我会在下面发布代码段。

谢谢！唐

<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图像来设置内部表格的高度，但是如果你设置了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的高度和宽度设置为小于10 x 10的尺寸，因此它们仍然可以将它们设置为1 x 1并且它们可以设置为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＆{39}和tables如何相互叠加。 https://jsfiddle.net/jtquaja1/2/

Answer 2

Spacer图像是一个很好而且简单的解决方案，但是由于Outlook忽略了html图像重新调整大小，Outlook不同呈现image size based on DPI以及图像阻塞或图像到文本的问题，可能会导致问题比率（importance is up for argument currently）

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

示例：foreach(@nop){ my ($id) = split; print "$id\n" if $nops{$id}; }

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

示例：<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>

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

展望2007年，2010年和2013年不尊重valign

2 个答案: