Outlook 2013 切断图像顶部？答案

【问题标题】：Outlook 2013 Cutting off top of image?Outlook 2013 切断图像顶部？
【发布时间】：2013-06-22 08:10:30
【问题描述】：

我正在设置一个电子邮件模板，一些图像的顶部被剪掉了。这是我的图片代码

<td style="line-height: 0"><img src="http://domain.com/image.png"></td>

我在 td 上有行高，这样下面的空白就会被删除，因为我希望它接触到下面的图像。

顶部的图像有一点顶部被切断，我该如何解决这个问题？

【问题讨论】：

标签： html css html-email

【解决方案1】：

我在电子邮件中遇到了同样的问题。我只是从我的邮件中删除 mso-line-height-rule 属性，它对我有用。

【讨论】：

【解决方案2】：

我将行高设置为“1”，这解决了我的问题：0）

<table>
  <tr>
    <td style="line-height:1;">
      <img src="http://example.com/138x33-team.png" width="138" height="33" style="display:block;">
    </td>
  </tr>
</table>

【讨论】：

这对我有用！我有 display: block; set 和 line-height 设置为正确的 px 值，但无法弄清楚 Outlook 为何仍将其切断。 . .

【解决方案3】：

我在这个问题上花费了太多时间方式，所以不妨记录下我的解决方案以供任何可能看到此问题的人使用。

我通过将图像嵌套在另一个表中解决了这个问题，如下所示：

<td style="line-height: 0">
<table>
  <tr>
    <td>
      <img src="http://example.com/image.png">
    </td>
  </tr>
</table>
</td>

【讨论】：

【解决方案4】：

我在 ol 2013/16 遇到了同样的问题。

最好的解决方案是指定行高以像素为单位。

将line-height:0; 更改为line-height: 0px。

【讨论】：

谢谢，我好久都想不通：D
聚会迟到了，但我不得不完全删除 line-height 并让 Outlook 来做这件事。（这只是一个页脚部分，所以行高并不重要）

【解决方案5】：

我在 MailChimp 中在文本块中插入图像时遇到了这个问题。为了解决这个问题，我将文本块的行高设置为双倍空格。之后，我重置模板中每个块的所有样式。希望这会有所帮助！

【讨论】：

【解决方案6】：

我的测试表明，在 Outlook 2013 中，与早期的 Outlook 版本不同，将 line-height 设置为 0 会导致容器小于包含的图像。结果是包含图像的顶部被裁剪。我可以解决此问题的唯一方法是将 line-height 设置为 0 以外的值。我使用 line-height: 17px 并且图像正确显示。它可能适用于 0 以外的任何其他值——我没有测试小于 17px 的值。

设置显示：块没有解决这个问题。由于这仅是 Outlook 2013 的问题，并且不会影响任何早期的 Outlook 版本或其他移动或桌面电子邮件客户端，因此可以安全地假设它是 Outlook 2013 的错误，并且预计不会有 Microsoft 的修复。因此，如果有人能证实我的发现，那么最好将此解决方法集成到您已经超大的解决方法调色板中，以适应 Microsoft 糟糕的 HTML 电子邮件支持。

【讨论】：

【解决方案7】：

始终在所有图像上使用Display:block，否则您会不时出现一些空白:)

【讨论】：

【解决方案8】：

我解决这个问题的方法是不使用 line-height 而是将图像设置为显示块，这解决了图像问题并仍然删除了下面的空白

<td><img src="http://domain.com/image.png" style="display:block;"></td>

希望这对某人有所帮助！

【讨论】：