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

时间：2019-04-09 08:26:04

标签： html email html-table outlook html-email

我正在构建一个电子邮件模板，尽管我尽力使用最准的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中均可正确渲染，如下所示： enter image description here

但是，当作为文本插入到Outlook 2016中时，它看起来像这样： enter image description here

（另外，这也是它的突出显示方式，在其中可以看到一些额外的间距：） enter image description here

基本上每个垂直间距都弄乱了。我如何解决它？由于它可以在 Internet Explorer 中正确显示，因此我希望它可以在Outlook中运行，但事实并非如此。

2 个答案:

答案 0 :(得分：0)

您可以使用<tr>代替<font>和<br>。这样您就可以得到期望的空间

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


<tr>
  <td style="border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding-bottom: 15px; text-align: center; vertical-align: top; padding-top:9px; ">
   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 />
  </td>
</tr>

<tr>
  <td style="border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding-bottom: 15px; text-align: center; vertical-align: top; padding-top:9px; ">
   <a href="#" style="text-decoration: none">eu fugiat nulla pariatur
  </td>
</tr>

<tr>
  <td style="border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding-bottom: 15px; text-align: center; vertical-align: top; padding-top:9px; ">
   <a href="#" style="text-decoration: none">esse cillum dolor</a>
  </td>
</tr>
<tr>
  <td style="border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding-bottom: 15px; text-align: center; vertical-align: top; padding-top:9px; ">
   <a href="#" style="text-decoration: none">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</a>
  </td>
</tr>


</table>

</body></html>

答案 1 :(得分：0)

Outlook 2016将TD设置为至少高17像素。为避免这种情况，请将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>）添加附加填充。

相关问题
最新问题