Question

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

有人可以帮忙吗？

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

对于所有版本的Outlook，修改后的代码在Litmus中测试得很好。

Answer 2

删除细胞填充，你不会看到红色bg。

Answer 3

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

Answer 4

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

这将删除额外的填充。

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

4 个答案: