html - 图像在 Outlook 2007/2010 中被截断

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>是内联元素，它应该包含在 block 级元素中。这就是为什么我包装我的 <img>在 <div> .但这导致了文本下挂导致我的问题 <div>太高了。所以我将行高设置为 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>

希望对您有所帮助!