Outlook 2007/2010/2013电子邮件显示问题

Question

下图显示了我遇到的问题。 左列中的图标在Outlook 2007、2010和2013中未垂直正确对齐。我尝试弄乱line-height / font-size无效。

我绘制了表格单元格/行边框以说明我正在使用的结构。 每个图标都有padding-top:5px以便与右栏中的文本正确对齐。

这是一行代码：

<tr>
    <td class="icon" width="59" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px;line-height: 1em;color: #666666;padding-top: 5px;margin: 0;"><img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="display: block;border: none;"></td>

    <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">1 in 3 Australian SMBs have had their 
    data held to ransom in the last 12 months*.</td>
</tr>

有任何想法吗？

Answer 1

如果padding-top不适用于td，请尝试将css应用于img本身。 编辑您的img的CSS（请参阅下面的代码）。 拆下TD的顶部。

<tr>
    <td class="icon" width="59" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px;line-height: 1em;color: #666666;"><img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="display: block;border: none;margin-top: 5px;"></td>

    <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">1 in 3 Australian SMBs have had their 
data held to ransom in the last 12 months*.</td>
</tr>

如果为img提供顶边距仍然不起作用，请尝试对其进行填充，甚至使用有边框的边框（边框宽度为5px）进行交易

Answer 2

为什么不只在包含图像的表单元格中使用valign="middle" ？

<tr>
  <td class="icon" width="59" valign="middle">
    <img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="margin: 0; border: 0; padding: 0; display: block;">
  </td>
  <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.
  </td>
</tr>

更新：这是一个示例，如果您有更多的文本。 您的图像将在顶部保持对齐。

<table width="325" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td class="icon" valign="top" width="59" valign="middle" style="padding-top:5px;">
    <img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="margin: 0; border: 0; padding: 0; display: block;">
  </td>
  <td valign="top" class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.<br>
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.<br>
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.
  </td>
</tr>
</table>