在 Outlook.com 中的图像中添加了额外的边距和行距答案

【问题标题】：Extra margin and line-space added to images in Outlook.com在 Outlook.com 中的图像中添加了额外的边距和行距
【发布时间】：2013-06-25 02:30:52
【问题描述】：

我可能遗漏了一些明显的东西，但由于某种原因，Outlook.com 覆盖了 P 标签的边距和行高，它方便将所有图像包裹在其中。任何解决方案都可以删除这个不需要的空间底部？

<table width="196" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse">
 <tr>
   <td valign="top" align="left" width="196" height="45">
     <table width="196" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse">
        <tr>
          <td style="font-size:0;line-height:0;border-collapse:collapse;border-bottom:1px solid #BBBBBB;padding:0;border-collapse:collapse;background:red;" valign="top" align="left" width="196">
             <a href="" style="font-size:0;line-height:0;" target="_blank">
                <img style="width:137px;height:44px;display:block;" src="" width="137" height="44" alt=""/></a>
           </td>
         </tr>
      </table>
    </td>
  </tr></table>

【问题讨论】：

标签： html-email outlook.com

【解决方案1】：

把它放在你的标题样式标签中：

p {margin: 1em 0;}

由于p标签是在渲染时插入的，所以需要在style标签中覆盖它。

【讨论】：

【解决方案2】：

在 Outlook 中撰写电子邮件很痛苦...我通过设置 style="border-collapse:collapse; line-height:0;" 设法消除了图像之间的额外空间在 TD 标签中并明确设置所有宽度和高度。别忘了把 style="display:block;"在您的 IMG 标签中覆盖所有客户。

    <td width="400" height="100" style="border-collapse:collapse;line-height:0;"><img src="myimage.jpg" width="400" height="100" style="display:block; border:0; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;"></td>

【讨论】：

border-collapse 中的<table> 更好；在<td> 上执行此操作（或高度）可能会导致 Outlook 2010 出现空间问题。

【解决方案3】：

您必须将以下内容放入头部样式部分：

img {
    line-height:100%;
}

其实outlook.com是把它转换成下面这样的，但是可以的！

.ExternalClass img {
    line-height: 100%;
}

我们在 app.edmdesigner.com 上使用这个解决方案来处理图像，并且效果很好。

【讨论】：