Outlook没有对齐2个图像，但其他浏览器是

Question

我正在尝试制作一封html电子邮件，它适用于除Outlook之外的所有浏览器。

我在桌子上创建了两行，每行都有一个图像，但图像之间有一个空白区域。

 <td colspan="2"><img style="display:block" src="images/greenTop02.gif" width="595" height="8" /></td>

完整的HTML代码：http://jsfiddle.net/eNKxp/2/

Answer 1

将<td>的高度设置为与图像高度相同。在图片代码中，请加上：style="margin: 0; border: 0; padding: 0; display: block;"

请注意，当outlook中的某个人将您的电子邮件转发给其他人时，这些差距是不可避免的。我建议组合你的图像，或者更好的是，将文本与图像分开，因为在大多数客户端默认情况下它是不可读的。

这是一个例子。这也将防止Outlook中的分离，因为图像是垂直切片的：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="3cb878">
  <tr>
    <td width="450" height="30">
      <img alt="" src="" width="450" height="30" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="150" rowspan="2">
      <img alt="" src="" width="150" height="150" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
  <tr>
    <td width="450" height="120" style="font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 18px; color: #FFFFFF; padding-left:20px; font-weight:bold;">
Put your text in here...<br>...<br>...<br>...
    </td>

  </tr>
</table>

Answer 2

将表td {border-collapse：collapse;}添加到您的头部并声明所有表格如下：

<table border="0" cellspacing="0" cellpadding="0">

Answer 3

尝试这个条件CSS：

<!--[if gte mso 9]>
<style type="text/css">
table {
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
}
table td {
border-collapse:collapse !important;
border:none !important;
mso-border-alt:0 !important;
}
</style>
<![endif]-->

<!--[if gte mso 15]>
<style type="text/css">
table {
font-size:1px;
mso-line-height-alt:0;
line-height:0;
mso-margin-top-alt:1px;
}
</style>
<![endif]-->