HTML 电子邮件中出现水平间隙答案

【问题标题】：Horizontal gaps appearing in HTML emailHTML 电子邮件中出现水平间隙
【发布时间】：2016-05-03 07:15:10
【问题描述】：

一段时间以来，我们发送的电子邮件的布局一直存在问题。正如您将在下面看到的，当电子邮件在 Outlook 中呈现时，它似乎显示了额外的水平间隙/空间。但是，当您查看它的网络版本时，电子邮件显示得非常好，所以我不能 100% 确定这些额外的差距来自哪里。任何人都可以看到代码中可能导致这些差距的任何内容吗？

***请注意，我们无权自行编辑代码，因为我们的电子邮件营销供应商对此有控制权，但我们可以向他们提供改进建议。

我提供了尽可能多的代码（我也将代码设为匿名）。所附图片显示了电子邮件在 Outlook 中的外观以及在网络版本中的外观（并且应该看起来）。

任何帮助将不胜感激。提前致谢。

<!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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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 &amp; 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</td>
                    </tr>
                  </table></td>

【问题讨论】：

标签： html css email outlook html-email

【解决方案1】：

好的，坏消息是，在开发 HTML 电子邮件时，您需要在每个邮件客户端（例如 gmail、outlook、yahoo）、每个 Web 浏览器（例如 Chrome、Firefox、Internet Explorer）和在每个电子邮件客户端（例如 Apple Mail、Outlook、Thunderbird）中。

您不能只在网页中查看它以检查它是否正常，您需要将其发送到尽可能多的不同帐户以在每个帐户中检查它。请参阅https://emailclientmarketshare.com/ 了解最受欢迎的电子邮件客户端列表。

电子邮件中的 HTML 没有标准化，因此任何给定的浏览器/客户端集都有很多怪癖。如需更好的解释，请参阅 Campaign Monitor 中的"What’s so hard about HTML emails?"。

如果不发送电子邮件就很难调试它们，所以我目前无法提供进一步的帮助。不过我很乐意稍后再看看。

【讨论】：

另一件要考虑的事情是，现在很多人在手机上查看电子邮件，所以它也应该在移动设备上工作。

【解决方案2】：

我相信很多问题都来自于内容使用段落和标题标签这一事实，这可能会导致结果差异很大。大多数“防弹”HTML 电子邮件仅依赖于表格，将样式应用于 td 标签以设置字体大小、行高等。如果您删除所有 p 和 h4 标签，并为周围的单元格标签添加带有填充的样式，它应该能解决你的很多问题。

另一个方便的技巧是将mso-line-height-rule: exaclty; 添加到您的样式中。这将使 Outlook（尤其是 2013）遵守您设置的行高，而不是添加额外的空间。

【讨论】：