时间戳

首页 > 解决方案 > Outlook 中的电子邮件模板间距中断

html - Outlook 中的电子邮件模板间距中断

问题描述

我正在构建一个电子邮件模板，尽管我努力使用我能想到的最简单的 2005 年 HTML，但当我尝试在 Outlook 中使用该模板时，间距完全被弄乱了。像这样的简单代码：

<html><head><meta content="text/html; charset=iso-8859-2"></head><body>

<table align="center" cellspacing=”0” cellpadding=”0” width="768" style="border:1px solid black">

<!-- ----------------------- -->
<tr height="24"><td></td></tr>
<tr align="center" height="24"><td><font face="Arial" size="5" color="#ff6200"><b>Lorem ipsum?</b></font></td></tr>
<tr height="10"><td></td></tr>
<tr align="center" height="100"><td><table><td width="280"><font face="Arial" size="4"><center> adipiscing elit, sed do eiusmod<br /><br />tempor incididunt ut labore et </center></font></td></table></td></tr>
<tr height="24"><td></td></tr>
<!-- ----------------------- -->
<tr height="24"><td></td></tr>
<tr align="center" height="36"><td><table><td width="420"><font face="Arial" size="3"><center>Lorem ipsum dolor sit amet</center></font></td></table></td></tr>
<tr height="7"><td></td></tr>
<tr align="center" height="20"><td><a href="#" style="text-decoration: none"><font face="Arial" size="3" color="#ff6200"><b>consectetur</b></font></a></td></tr>
<tr height="27"><td></td></tr>
<!-- ----------------------- -->
<tr align="center" height="170" bgcolor="#f2f2f2"><td><center><font face="Arial" size="1" color="#000000" style="line-height: 1.8">
olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /><br style="line-height: 10%" />
Lorem:<br /></font>
<a href="#" style="text-decoration: none"><font face="Arial" size="1" color="#ff6200" style="line-height: 1.8">eu fugiat nulla pariatur</font></a><br />
<font face="Arial" size="1" color="#000000" style="line-height: 1.8">esse cillum dolor<br />
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</font></center></td></tr>


</table>

</body></html>

对我来说，在 Firefox 和 IE 中都正确呈现，如下所示： 在此处输入图像描述

但是，当作为文本插入 Outlook 2016 时，它看起来像这样： 在此处输入图像描述

（另外，这是它看起来如何突出显示的，其中一些额外的间距可以看到：） 在此处输入图像描述

基本上每个垂直间距都会搞砸。我如何解决它？由于它在Internet Explorer中正确呈现，我希望它可以在 Outlook 中工作，但似乎并非如此。

标签： htmlemailhtml-tableoutlookhtml-email

解决方案

Outlook 2016 将 TD 设置为至少 17px 高。为避免这种情况，请将 line-height 和 font-size 设置为 1px（或所需大小）。这就是我最近构建所有垫片的方式。例如：

<table border="0" cellpadding="0" cellspacing="0"> 
<tr>
    <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
    &nbsp;
    </td>
</tr>

如果您只需要列表项之间的垂直空间，请使用 margin-bottom。不要使用填充，因为 Outlook 不支持它。

Microsoft Office 风格（MSO 风格）会稍微收紧你的线条。如果你的间距看起来不对，试试看。只需添加“mso-line-height-rule:exactly;” 直接在行高样式之前，内联或嵌入。

如果您需要，这里有更多关于 HTML 电子邮件间距的信息！https://www.emailonacid.com/blog/article/email-development/spacing-techniques-in-html-email/#utm_source=Blog&utm_medium=website&utm_campaign=LeadGen_2018&utm_term=development

编辑：

我会说这可能需要使用额外的内联 CSS 来处理。潜在的添加mso-table-lspace: 0px; mso-table-rspace: 0px;可能会有所帮助。如果他们担心他们的任何内联 CSS 被覆盖，他们可以应用!important到每个的末尾。

例如mso-table-lspace: 0px !important; mso-table-rspace: 0px !important;

上述项目通常应用于<head>电子邮件标签中应用的 CSS 中的这些 HTML 元素，并且可以内联应用于他们遇到问题的每个标签：

table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; } td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; }

所有这些都以一种或另一种方式使用，以防止 Outlook 向表格 ( <table>) 和表格单元格 ( <td>) 添加额外的填充。

推荐阅读