Question

我可能会遗漏一些显而易见的东西，但出于某种原因，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>

Answer 1

将它放在标题样式标记中：

p {margin: 1em 0;}

由于在渲染时插入了p标签，您需要在样式标签中覆盖它。

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

Answer 3

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

img {
    line-height:100%;
}

实际上，outlook.com会将其转换为以下内容，但它会起作用！

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

我们在app.edmdesigner.com上使用此解决方案获取图像，并且效果非常好。

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

3 个答案: