Question

我正在设置一个电子邮件模板，并且几张图片的顶部正在被切断。这是我的图像代码

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

我在td上有行高，这样就可以删除下面的空白区域，因为我希望它能够触及下面的图像。

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

Answer 1

我和ol 2013/16有同样的问题。

最佳解决方案是指定行高以像素表示。

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

Answer 2

我修复此问题的方法是不使用行高，而是将图像设置为显示块，这样可以修复图像问题并仍然删除下面的空白区域

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

希望这有助于某人！

Answer 3

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

设置显示：块没有修复此问题。由于这只是Outlook 2013的一个问题，并且不会影响任何早期的Outlook版本或其他移动或桌面电子邮件客户端，因此可以安全地认为它是Outlook 2013的错误并且Microsoft的修复程序不是＆＃ 39; t是可以预料的。因此，如果任何人都可以确认我的发现，那么将这种解决方法集成到您已经超大的变通方法中，以适应Microsoft不良的HTML电子邮件支持是一个好主意。

Answer 4

我在这个问题上花费了太多的时间，所以最好还是将解决方案记录在案的人。

我通过将图像嵌套在另一个表中来解决了这个问题，

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

Answer 5

我将行高设置为“ 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>

Answer 6

总是在所有图片上使用Display:block，否则您会不时获得一些空格：）

Answer 7

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

Answer 8

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

Outlook 2013切断图像顶部？

8 个答案: