Outlook 不对齐 2 个图像，但其他浏览器是答案

【问题标题】：Outlook not aligning 2 images but other browsers areOutlook 不对齐 2 个图像，但其他浏览器是
【发布时间】：2014-01-09 16:02:43
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html html-table html-email

【解决方案1】：

试试这个条件 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]-->

【讨论】：

【解决方案2】：

将 table td {border-collapse:collapse;} 添加到您的头部并像这样声明您的所有表格：

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

【讨论】：

这也是绝对需要的。
是的，我在表格的开头添加了这个

【解决方案3】：

将<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>

【讨论】：

iv 为每个图像添加了边框边距填充和显示，仍然显示 hotmail 上的空白区域.... arraghh
也许 colspan 搞砸了。尝试将两行嵌套到一个表中。这是you should be mindful of 在 Outlook 中使用 colspan 时的内容。