1. 首页
  2. 问答
  3. HTML电子邮件中出现水平间隙

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

2016-04-27 217 views
0

我们发送的电子邮件的布局已经有一段时间了。正如你将在下面看到的那样，当电子邮件在Outlook中呈现时，它似乎显示了额外的横向空白/空格。但是，当您查看Web版本的电子邮件时，电子邮件显示效果非常好，所以我不能100％确定这些额外的差距来自哪里。任何人都可以在代码中看到任何可能导致这些差距的东西吗？HTML电子邮件中出现水平间隙

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

我已经提供尽可能多的代码，我可以（我也使代码匿名）。附加的图像显示了Outlook中的电子邮件的外观以及它在Web版本中的外观（应该看起来像）。

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

Example of email in Outlook Web version

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

来源

2016-04-27 user2280513

回答

0

好，这里是个坏消息，开发HTML电子邮件时，你需要检查他们在每一个邮件客户端（例如Gmail时，展望，雅虎），每一个网络上浏览器（例如Chrome，Firefox，Internet Explorer）和每个电子邮件客户端（例如Apple Mail，Outlook，Thunderbird）。

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

电子邮件中的HTML不是标准化的，所以对于任何给定的浏览器/客户端都有很多怪癖。有关更好的解释，请参阅Campaign Monitor中的"What’s so hard about HTML emails?"。

很难在不发送邮件的情况下对邮件进行调试，所以我现在不能再做进一步的了。但我很乐意稍后再看看。

来源

2016-04-27 12:31:27 Sarcoma

+0

另一件需要考虑的事情是，很多人最近在手机上查看电子邮件，所以它也应该可以在手机上使用。 – Sarcoma

0

我相信很多问题都来自于内容使用段落和标题标签的事实，这可能会导致结果大幅变化。大多数“防弹”HTML电子邮件仅依赖于表格，并且将txt标签的样式应用于设置字体大小，线条高度等。如果删除所有p和h4标签，并将填充样式添加到周围的单元标签，它应该照顾很多你的问题。

另一个方便的技巧是将mso-line-height-rule: exaclty;添加到您的造型。这将适用于Outlook（特别是2013年），以符合您设置的行高并且不会增加额外的空间。

来源

2016-05-02 23:15:10

相关问题

 相关问题