Question

<table cellspacing="0" cellpadding="0" border="0">
 <tbody>
   <tr>
     <td width="20">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12"></td>
     <td valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td>
   </tr>
 </tbody>
</table>

我在Outlook中有上述代码。它显示得很好但是在Gmail，Yahoo和Hotmail中，子弹和文本没有垂直对齐在顶部，似乎在文本的顶部有填充。有什么想法吗？

Answer 1

长话短说，在我今天下午进行的测试中，看起来outlook支持td元素的valign属性，但是gmail和其他人想要vertical-align css规则。 Gmail仅支持内联样式，而不支持样式标记，因此您必须执行以下操作：

<table>
  <tr>
    <td valign="top" style="vertical-align:top;"></td>
  </tr>
</table>

还要确保声明doctype！确保它高于<html>元素：

<!DOCTYPE html>

Answer 2

使用此代码

<table cellspacing="0" cellpadding="0" border="0">
   <tbody>
   <tr>
   <td width="20" align="left" valign="top">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12" align="top"></td>
   <td align="left" valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td>
   </tr>
   </tbody>
   </table>

Answer 3

首先作为电子邮件的一般做法，您需要在所有图像上放置显示块并且通常为border：none。其次，您可能遇到默认问题。在td上设置所有样式。如果我需要一些特定的间距，我会在td上将字体大小和行高设置为1px以避免继承。您可能还需要在第一个td上使用valign top。我无法确定哪一部分没有从描述中排出。祝你的电子邮件好运。

Answer 4

我猜它可能是由于。我不再使用源码，但我记得许多电子邮件客户端，包括Outlook都没有阅读。

如何垂直对齐图像和文本跨客户端电子邮件模板

4 个答案: