如何修复 Outlook 2013 中的图像显示？答案

【问题标题】：How can I fix image display in Outlook 2013?如何修复 Outlook 2013 中的图像显示？
【发布时间】：2012-08-06 23:35:20
【问题描述】：

在 Outlook 2013 的试用版中，HTML 电子邮件中的图像显示非常奇怪。据我通过测试得出的结论，看起来低于 20 像素高的图像添加了填充以使它们高 20 像素。我能做些什么来改变它吗？这些电子邮件在 Outlook 2010 和我一直在测试它们的其他任何地方看起来都很好。

我尝试更改它们所在的表格单元格的高度（通过height="13" 以及内联css）以及它们所在的表格和表格行，全部为否利用。以下代码是触发此问题的一个简单示例，您将能够看到图像上方单元格的红色背景：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="195" style="background-color:#ff0000;"><img src="image url here" alt="" width="195" height="13" style="display: block" /></td>
  </tr>
</table>
</body>
</html>

谁能帮忙？

【问题讨论】：

标签： outlook html-email

【解决方案1】：

将line-height 样式添加到td 标记（为了更好地衡量，也可以将height 属性添加到td 标记）。

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="195" height="13" style="background-color:#ff0000; line-height:13px;">
      <img src="..." alt="" width="195" height="13" style="display:block;" />
    </td>
  </tr>
</table>

修改后的代码在 Litmus 中针对所有 Outlook 版本进行了良好测试。

【讨论】：

【解决方案2】：

删除单元格填充，这样你就不会看到那个红色的背景了。

【讨论】：

除了表格标签中已经存在的 'cellpadding="0"' 之外，我该怎么做？

【解决方案3】：

我发现添加<font size="1"><img /></font> 也可以解决问题。

【讨论】：

【解决方案4】：

将style="display:block;" 添加到任何图像标签。 <img src="/img/s.gif" width="1" height="1" alt="" style="display:block;">

这将删除多余的填充。

【讨论】：