Outlook 2013切断图像顶部?

问题描述 投票:9回答:8

我正在设置一个电子邮件模板,一些图像的顶部被切断。这是我的图像代码

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

我在td上有行高,这样下面的空白区域就会被移除,因为我希望它能够触摸下面的图像。

顶部图像有一些顶部被截断,但我该如何解决这个问题?

html css html-email
8个回答
11
投票

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

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

line-height:0;改为line-height: 0px


10
投票

我解决这个问题的方法是不使用行高,而是将图像设置为显示块,这样就修复了图像问题并仍然删除了下面的空白区域

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

希望这有助于某人!


2
投票

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

设置显示:块没有解决这个问题。由于这仅仅是Outlook 2013的问题,并且不会影响任何早期的Outlook版本或其他移动或桌面电子邮件客户端,因此可以安全地假设它是Outlook 2013错误,并且不会出现Microsoft的修复。因此,如果任何人都可以确认我的发现,那么将这种解决方法集成到您已经超大的变通办法中,以适应微软糟糕的HTML电子邮件支持是一个好主意。


1
投票

我在这个问题上花了太多时间,所以不妨为任何可能看到这个问题的人记录我的解决方案。

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

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

1
投票

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

0
投票

总是在所有图像上使用Display:block,否则你会不时得到一些白色空间:)


0
投票

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


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.