从Outlook发送到Gmail时，额外的空间添加到HTML电子邮件 [英] Extra space added to HTML e-mail when sent from Outlook to Gmail

问题描述

如果我在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添加到图片，设置字体大小和行高为0等我试了十几种方法，但都没有工作，因为幕后的HTML修改，我无法控制 - 样式和属性被剥离，标签有自己的新增属性等。

是否有解决方法可以保留原始格式？我很乐意提供所需的任何额外细节，只是让我知道。

解决方案

有没有解决这个问题，但有办法限制和隐藏分离的大小。我将它称为分离，但它实际上是由于Outlook应用mso-normal p标签而扩大的顶级单元格。 这是一篇相关文章。

表之间创建比表行（2px）更大的差距（大约15px）。这是更复杂的，但尝试把你无法承受的所有东西都分解成一张大桌子。 Colspans和rowspans可能很复杂，但是如果设置正确，它们就可以工作。

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

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

If I open the following HTML e-mail in Gmail or Outlook it renders as it should:

<img src="img.png" />

However, if I open it in Outlook and then forward it to Gmail, it adds extra garbage HTML that makes the area taller than it should be (the 'p' tag is responsible for the added height - 3px specifically):

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

There are lots of solutions for fixing spacing issues in Gmail, like adding display:block to the image, setting the font-size and line-height to 0, etc. I've tried over a dozen methods and none have worked because of behind the scenes HTML modification that I have no control over - styles and attributes getting stripped, tags with their own properties getting added, etc.

Is there is a work around to allow the original formatting to always be preserved? I will gladly provide any additional details needed, just let me know.

解决方案

There is no fix for this, but there are ways to limit and hide the size of the separation. I'll refer to it as separation, but it is really the top cell expanding due to Outlook applying the mso-normal p tag. Here is a related article.

Between tables creates a bigger gap (about 15px) than between table rows (2px). It is more complex, but try and put everything that you can't afford separating into one big table. Colspans and rowspans can be complex, but they work if set up correctly.

To hide the separation, wrap all the tables in a master-content table with the bgcolor set. For example, make one big content pane set to white. When sending from Outlook, all your child tables will then move, but the gaps will remain white, stopping unwanted lines appearing in your email body.

A trick for footers - As the last child table of your main white panel, when this separates, it will create a white line underneath it. Either remove the footer table from the main panel or set the cell bgcolor to the same as your email background to hide this separation.

这篇关于从Outlook发送到Gmail时，额外的空间添加到HTML电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！