HTML电子邮件中出现水平间隙
我们已经发布了一段时间的问题，我们发送的电子邮件的布局。正如您将在下面看到的，当在Outlook中呈现电子邮件时，它似乎显示了额外的水平间隙/空格。但是，当您查看网络版本时，电子邮件显示完全正常，因此我不能100％确定这些额外差距来自哪里。任何人都可以在代码中看到可能导致这些差距的任何内容吗？
***请注意我们无权自行编辑代码，因为我们的电子邮件营销供应商已对此进行控制，但我们可以为他们提供改进建议。
我提供了尽可能多的代码（我也使代码匿名）。附带的图像显示了Outlook中的电子邮件的样子以及Web版本中的外观（应该是什么样子）。
非常感谢任何帮助。提前谢谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CHRIS TEST EMAIL</title>
<!--[if gte mso 9]>
<style>
ul {margin-top:0px;margin-right:0px;margin-left:24px !important;}
ul li {margin-top:0px;margin-right:0px;padding-left:2px !important;margin-bottom:2px;}
ul ul {margin-top:10px !important;margin-right:0px;margin-left:24px !important;margin-bottom:15px !important;}
ol {margin-top:0px;margin-right:0px;margin-left:0px;margin-bottom:15px !important;}
</style>
<![endif]-->
</head>
<body class="page-bg" style="margin:10px;padding:0;font-family:Arial, Helvetica, sans-serif;color:#313131;background:#e3e3e3;height:100%;width:100%;-webkit-text-size-adjust:none;-ms-text-size-adjust:none">
<div align="center" style="margin:0;padding:0;-webkit-text-size-adjust:none">
<table width="700" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" class="whiteBg" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;background:#ffffff">
<tr>
<td style="-webkit-text-size-adjust:none"><table width="700" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
<td width="660" style="-webkit-text-size-adjust:none"><table border="0" cellspacing="0" cellpadding="0" width="660" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td height="10" class="spacer" style="-webkit-text-size-adjust:none;font-size:1px;line-height:1px"> </td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust:none"><div id="txt_01" class="vx_text smallText" style="margin:0;padding:0;-webkit-text-size-adjust:none">
<p align="center" style="margin:0;padding:0;-webkit-text-size-adjust:none;margin-bottom:12px;font-size:11px;line-height:12px;color:#313131;font-family:Arial, Helvetica, sans-serif">To view a web version of this email please <a href="http://example-code.com/chris-test-email(1).asp" style="-webkit-text-size-adjust:none;color:#313131;text-decoration:underline">click here</a></p>
</div></td>
</tr>
<tr>
<td height="5" class="spacer" style="-webkit-text-size-adjust:none;font-size:1px;line-height:1px"> </td>
</tr>
</table></td>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td style="-webkit-text-size-adjust:none"><table width="700" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
<td align="left" width="660" style="-webkit-text-size-adjust:none"><a href="http://example-code.com%2f" style="-webkit-text-size-adjust:none;color:#D52590;text-decoration:none"><img src="http:///example-code.com/images/logo.jpg" alt="Example & Company" width="180" height="40" border="0" style="display:block;border:none"></a></td>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td style="-webkit-text-size-adjust:none"><table width="700" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
<td align="left" width="330" class="colourText" style="-webkit-text-size-adjust:none"><div id="txt_02" class="vx_text colourText" style="margin:0;padding:0;-webkit-text-size-adjust:none"><p style="margin:0;padding:0;-webkit-text-size-adjust:none;margin-bottom:15px;font-size:13px;line-height:16px;color:#663366;font-family:Arial, Helvetica, sans-serif">Your update</p></div></td>
<td align="right" width="330" class="colourText" style="-webkit-text-size-adjust:none"><div id="txt_03" class="vx_text colourText" style="margin:0;padding:0;-webkit-text-size-adjust:none">
<p align="right" style="margin:0;padding:0;-webkit-text-size-adjust:none;margin-bottom:15px;font-size:13px;line-height:16px;color:#663366;font-family:Arial, Helvetica, sans-serif">Issue 000 | January 2015</p>
</div></td>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td style="-webkit-text-size-adjust:none"><div id="img_01" class="vx_image banner" style="margin:0;padding:0;-webkit-text-size-adjust:none"><img src="http://example-code.com/images/image.jpg" alt="Updating you on issues" width="700" height="149" style="display:block"></div></td>
</tr>
<tr>
<td style="-webkit-text-size-adjust:none"><table width="700" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="182" style="-webkit-text-size-adjust:none"><a href="http://example-code.com/%2fwhoweare%2f" target="_blank" style="-webkit-text-size-adjust:none;color:#D52590;text-decoration:none"><img src="http://example-code.com/images/b1.jpg" alt="Who we are" width="182" height="28" border="0" style="display:block;border:none"></a></td>
<td width="166" style="-webkit-text-size-adjust:none"><a href="http://example-code.com/%2flegalservices%2f" target="_blank" style="-webkit-text-size-adjust:none;color:#D52590;text-decoration:none"><img src="http://example-code.com/images/b2.jpg" alt="What we do" width="166" height="28" border="0" style="display:block;border:none"></a></td>
<td width="166" style="-webkit-text-size-adjust:none"><a href="http://example-code.com/%2fstayinformed%2f" target="_blank" style="-webkit-text-size-adjust:none;color:#D52590;text-decoration:none"><img src="http://example-code.com/images/b3.jpg" alt="Stay informed" width="166" height="28" border="0" style="display:block;border:none"></a></td>
<td width="186" style="-webkit-text-size-adjust:none"><a href="http://example-code.com/%2flinks%2f" target="_blank" style="-webkit-text-size-adjust:none;color:#D52590;text-decoration:none"><img src="http://example-code.com/images/b4.jpg" alt="Online resources" width="186" height="28" border="0" style="display:block;border:none"></a></td>
</tr>
</table></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="700" bgcolor="#FFFFFF" class="whiteBg" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;background:#ffffff">
<tr>
<td height="20" class="spacer" style="-webkit-text-size-adjust:none;font-size:1px;line-height:1px"> </td>
</tr>
</table>
<table width="700" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" class="whiteBg" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;background:#ffffff">
<tr>
<td align="left" valign="top" style="-webkit-text-size-adjust:none"><div id="col_01" class="vx_drag vx_blocks_file_blocks_left_column left_column" style="margin:0;padding:0;-webkit-text-size-adjust:none"><div id="blk_01" class="vx_block" style="margin:0;padding:0;-webkit-text-size-adjust:none">
<table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
<td width="440" valign="top" align="left" style="-webkit-text-size-adjust:none"><div id="txt_04" class="vx_text text" style="margin:0;padding:0;-webkit-text-size-adjust:none"><p style="margin:0;padding:0;-webkit-text-size-adjust:none;margin-bottom:15px;font-size:13px;line-height:16px;color:#313131;font-family:Arial, Helvetica, sans-serif">Dear Chris</p>
<p style="margin:0;padding:0;-webkit-text-size-adjust:none;margin-bottom:15px;font-size:13px;line-height:16px;color:#313131;font-family:Arial, Helvetica, sans-serif">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus nibh nec tortor condimentum, ut ullamcorper turpis consectetur. Mauris elementum dictum venenatis.</p></div></td>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td height="10" class="spacer" style="-webkit-text-size-adjust:none;font-size:1px;line-height:1px"> </td>
</tr>
</table>
</div>
<div id="blk_02" class="vx_block" style="margin:0;padding:0;-webkit-text-size-adjust:none">
<table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
<td height="1" width="440" class="line" style="-webkit-text-size-adjust:none;border-top:solid 1px #CCCCCC;font-size:1px;line-height:1px"><img src="http://example-code.com/images/spacer.gif" alt="spacer" width="1" height="1" style="display:block"></td>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
</tr>
</table>
</div>
<div id="blk_03" class="vx_block" style="margin:0;padding:0;-webkit-text-size-adjust:none">
<table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
<td width="440" valign="top" align="left" style="-webkit-text-size-adjust:none"><div id="txt_05" class="vx_text text" style="margin:0;padding:0;-webkit-text-size-adjust:none"><h3 style="margin:0;padding:0;font-size:14px;line-height:16px;color:#663366;color:#663366 !important;font-weight:normal;margin-bottom:14px;font-family:Arial, Helvetica, sans-serif"><strong>Subheading 1</strong></h3>
<p style="margin:0;padding:0;-webkit-text-size-adjust:none;margin-bottom:15px;font-size:13px;line-height:16px;color:#313131;font-family:Arial, Helvetica, sans-serif">Mauris commodo tempor dignissim. Integer gravida urna non venenatis maximus. Integer a vehicula urna. In bibendum nisl id urna fringilla hendrerit. Sed id nunc sed orci auctor ornare id quis nibh.</p></div></td>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td height="10" class="spacer" style="-webkit-text-size-adjust:none;font-size:1px;line-height:1px"> </td>
</tr>
</table>
</div>
<div id="blk_04" class="vx_block" style="margin:0;padding:0;-webkit-text-size-adjust:none">
<table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
<td height="1" width="440" class="line" style="-webkit-text-size-adjust:none;border-top:solid 1px #CCCCCC;font-size:1px;line-height:1px"><img src="http://example-code.com/images/spacer.gif" alt="spacer" width="1" height="1" style="display:block"></td>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
</tr>
</table>
</div>
<div id="blk_05" class="vx_block" style="margin:0;padding:0;-webkit-text-size-adjust:none">
<table border="0" cellspacing="0" cellpadding="0" width="480" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"><table width="20" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt">
<tr>
<td width="20" style="-webkit-text-size-adjust:none"> </td>
</tr>
</table></td>
2 个答案:
答案 0 :(得分：0)
好的，这是坏消息，在开发HTML电子邮件时，您需要在每个网络浏览器（例如Chrome，Firefox，Internet Explorer）上的每个邮件客户端（例如gmail，outlook，yahoo）中检查它们。在每个电子邮件客户端（例如Apple Mail，Outlook，Thunderbird）。
您无法在网页中查看它是否正常，您需要将其发送到尽可能多的不同帐户，以便在每个帐户中进行检查。有关最受欢迎的电子邮件客户端列表，请参阅https://emailclientmarketshare.com/。
电子邮件中的HTML不是标准化的，因此任何给定的浏览器/客户端都有很多怪癖。有关更好的说明，请参阅“广告系列监视器”中的"What’s so hard about HTML emails?"。
很难在不发送电子邮件的情况下调试电子邮件，所以我现在无法提供帮助。我很乐意稍后再看看。
答案 1 :(得分：0)
我认为很多问题都来自内容使用段落和标题标签这一事实，这可能会导致结果发生变化。大多数“防弹”HTML电子邮件仅依赖于表格，应用于td标签的样式设置字体大小，行高等。如果删除所有p和h4标签，并使用填充添加样式到周围的单元格标签，它应该照顾好你的很多问题。
另一个方便的技巧是将mso-line-height-rule: exaclty;添加到您的样式中。这将使Outlook（尤其是2013）尊重您设置的行高，而不是添加额外的空间。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？