从 Outlook 发送到 Gmail 时向 HTML 电子邮件添加额外空间答案

【问题标题】：Extra space added to HTML e-mail when sent from Outlook to Gmail从 Outlook 发送到 Gmail 时向 HTML 电子邮件添加额外空间
【发布时间】：2013-02-13 21:09:55
【问题描述】：

如果我在 Gmail 或 Outlook 中打开以下 HTML 电子邮件，它会按原样呈现：

<img src="img.png" />

但是，如果我在 Outlook 中打开它，然后将其转发到 Gmail，它会添加额外的垃圾 HTML，使该区域高于应有的高度（“p”标签负责增加高度 - 特别是 3px）：

<p class="MsoNormal">
    <span style="font-size:10.0pt">
        <img src="img.png">
        <u></u>
        <u></u>
     </span>
</p>

解决 Gmail 中的间距问题有很多解决方案，例如在图像中添加 display:block、将 font-size 和 line-height 设置为 0 等。我尝试了十几种方法，但都没有奏效因为我无法控制在幕后的 HTML 修改 - 样式和属性被剥离，带有自己属性的标签被添加等等。

是否有一种变通方法可以始终保留原始格式？我很乐意提供所需的任何其他详细信息，请告诉我。

【问题讨论】：

转发总是会给电子邮件的渲染和功能带来问题。通常，为大多数发送系统（例如 MailChimp）添加转发给朋友的功能是解决此问题的方法。

标签： outlook gmail whitespace html-email

【解决方案1】：

没有解决方法，但有一些方法可以限制和隐藏分隔的大小。我将其称为分离，但由于 Outlook 应用了 mso-normal p 标签，它实际上是顶部单元格的扩展。 Here is a related article.

表格之间的间隙（大约 15 像素）比表格行之间的间隙（2 像素）更大。它更复杂，但试着把你负担不起的所有东西都放在一张大桌子上。 Colspans 和 rowspans 可能很复杂，但如果设置正确，它们就可以工作。

要隐藏分隔，请将所有表格包装在一个主内容表格中，并设置 bgcolor 。例如，将一个大的内容窗格设置为白色。从 Outlook 发送时，您的所有子表都会移动，但间隙将保持白色，从而阻止不需要的行出现在您的电子邮件正文中。

页脚技巧 - 作为主白色面板的最后一个子表，当它分开时，它将在其下方创建一条白线。从主面板中删除页脚表格或将单元格 bgcolor 设置为与您的电子邮件背景相同以隐藏此分隔。

【讨论】：

嗨@John，我只有一个在 foreach 循环中创建的带有 tr 标签的表，我遇到了 MsoNormal p 标签添加空间的问题。你能给我一个解决方法吗？

【解决方案2】：

我设法通过更改 MsoNormal 类来改变这种情况

 <style>
    td p.MsoNormal {margin: -4px !important}

    /* ou */

    .MsoNormal {
        margin: -4px !important;
    }
 </style>

【讨论】：