图像在 Outlook 2007/2010 中被截断答案

【问题标题】：Images getting cut off in Outlook 2007/2010图像在 Outlook 2007/2010 中被截断
【发布时间】：2012-06-27 09:47:31
【问题描述】：

图像丢失了第一行像素，但仅在某些情况下。示例标记：

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="top" height="20">
            <div style="line-height:0;"><img src="http://path.to/image.png" alt="" height="20" width="25" /></div>
        </td>
    </tr>
</table>

我的印象是，由于<img> 是一个内联元素，它应该包含在块级元素中。这就是我将<img> 包裹在<div> 中的原因。但这导致了一个问题，即文本挂起导致我的<div> 太高。所以我将 line-height 设置为 0 作为一种解决方法。

无论height或valign我设置在<td>或<img>上，图像的顶部仍然被切断。我发现删除行高就是答案。为什么是这样？

我以后会在我的<img> 标签上使用 display: block。

【问题讨论】：

银忍者。那是一个错字，它从未出现在我的标记中。固定的。 @Ashan - 这是 it should look like 和 how it's showing up 的示例。请注意赢得更多比赛、大量使用以及“人们在说什么”方面的差异，这已经完全被切断了。
嗯，即使 Outlook 很古怪，单元格中的图像也应该可以正常工作。我认为您可能想多了——您是否尝试过将图像放在<td> 中，而不使用<div>？另外，请尝试删除 <td> 上的 'valign' 和 'height' 属性。

标签： html image email outlook

【解决方案1】：

<div>s 的处理方式因您使用的电子邮件客户端而异。电子邮件客户端的 IE 是 AOL（但是，谁再使用它了）。我认为chipcullen是对的，你想多了。为什么要添加不必要的代码。试一试（TD 内没有线路重复）：

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><img src="http://path.to/image.png" alt="" height="20" width="25"></td>
    </tr>
</table>

或者如果你真的必须定义高度：

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="20" style="height:20px;line-height:20px;"><img src="http://path.to/image.png" alt="" height="20" width="25"></td>
    </tr>
</table>

希望有帮助！

【讨论】：

chipcullen 是对的。我指定 display: block 代替我的图像，它们现在效果很好。

【解决方案2】：

当在营销活动中插入很长的图像时，Outlook 中会出现这种情况。图像长度的限制约为 1728 像素高。 Outlook 将剪掉高于 1728 像素的图像顶部的多余部分。

如果您无法将图像的尺寸减小到 1728 像素以下，最好的选择是将图像裁剪成单独的图像。如果使用拖放模板，您可以将多个图像块添加到活动中以上传图像的每个部分。要确保图像显示为一个流畅的图像，请导航到每个图像块的“设置”选项卡，然后选中“边距”下的“边缘到边缘”复选框。

【讨论】：