Question

图像丢失了最上面一行像素，但仅限于某些情况。示例标记：

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

Answer 1

根据您使用的电子邮件客户端，

<div>会受到不同的处理。电子邮件客户端的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>

希望有所帮助！

Answer 2

当在广告系列中插入非常长的图片时，会发生这种情况。图像长度的限制大约是1728像素高。 Outlook将超出1728px以上的图像顶部剪掉多余部分。

如果无法将图像尺寸减小到1728像素以下，最佳选择是将图像裁剪为单独的图像。如果使用拖放模板，则可以向广告系列添加多个图像块以上载图像的每个部分。要确保图像显示为一个流体图像，请导航到每个图像块的“设置”选项卡，然后选择“边距”下的“边缘到边缘”复选框。

Outlook 2007/2010中的图像被切断

2 个答案: