HTML电子邮件通讯-Outlook 2007/2010中的间隔

Question

我正在编写HTML电子邮件时事通讯，并且在Outlook 2007和2010中表格的间距问题变得非常奇怪

我的代码在所有其他客户端上都可以正常运行，在这里：

   <table width="575" align="center" border="0" cellspacing="0" cellpadding="0">
 <tr>
<td bgcolor="#0054a4" style="padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><a href="http://www.lgfhfghfhfhfghf" target="_blank" style="font-family:Myriad Pro, Verdana, Georgia; font-size:30px; line-height: 34px; font-style:normal; color:#ffffff; text-decoration:none;"><center>
      <span style="font-weight:bold;">register</span> for <span style="font-style:lighter;color:#fce000;">mkk</span><span style="color:#fce000; font-weight:bold;"> 56565464646 </span><span style="font-weight:normal; text-decoration:underline;">click here</span></strong>
</center></a></td></tr>



   <tr>
   <td bgcolor="#fce000" style="padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:15px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><a href="http://www.fgdfgdg"" target="_blank" style="font-family:Myriad Pro, Verdana, Georgia; font-size:30px; line-height: 30px; font-style:normal; color:#ffffff; text-decoration:none;"><center>
      <span style="font-style:lighter;color:#0054a4;">lll</span><span style="color:#0054a4; font-weight:bold;"> ffgfgf </span><span style="font-weight:normal; color:#000000; text-decoration:none;">is proudly sponsored by</span></strong>
     </center></a></td>
    </tr>
   <tr>
      <td bgcolor="#0054a4" style="padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><a href="http://www.gdfgdfgdf" target="_blank"><img name="fgdgfg" src="http://fgfdgdgdg" width="575" height="76" style="font-size:20px; color:#fce000;" alt="fgfdgdfgdfg" border="0"/></a></td>
   </tr>
      </table>

  <table bgcolor="#0055a5" align="center" width="575" border="0" cellspacing="0" cellpadding="10">
                      <tr>
                        <td align="left" bgcolor="#0055a5" valign="top"><img src="http://www.fdgfdgdfgdfgdf.png" height="50" width="50" alt="gggggg" align="top" border="no" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" /></td>



                        <td align="right" bgcolor="#0055a5" valign="top" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:30px;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;color:#fce000;" ><span style="font-weight:bold;color:##fce000;" >gfrtryrtytryrtyrty</span><br />
                          rtrtrtrtertretertetertertertertertertertetert <font style="text-decoration:none;">tertetertetetet</font>
                          <a href=mailto:fgdfgdfgdgdfgfdstyle="color:#fce000; text-decoration:none;" >rtdfgdfgdfgdfg</a> / <a href="http://www.fgdfgdfgdgdgdf" target="_blank" style="color:#fce000;text-decoration:none;">www.fgfgdfgfgd/expo</a><br />

                         <strong> To unsubscribe from this newsletter </strong><a href="http://$UNSUB$" style="color:#fce000; font-weight: bold; text-decoration: underline" >click here</a>

                          </td>
                        </tr>
                      </table>

这里的奇怪的Outlook间隔的屏幕截图

工作电子邮件的屏幕截图

如果有人可以帮忙，请尽其所能，让我发疯！

Answer 1

不要将<center>标记包装在<a>标记内... Outlook使用MS Word渲染HTML（上帝知道原因），因此它在如何构造标记方面有很多限制。 只需将链接移到<center>标记内即可，它应该可以正常工作（我对此进行了测试）：

<table width="575" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#0054a4" style="padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><center>
        <a href="http://www.lgfhfghfhfhfghf" target="_blank" style="font-family:Myriad Pro, Verdana, Georgia; font-size:30px; line-height: 34px; font-style:normal; color:#ffffff; text-decoration:none;"> <span style="font-weight:bold;">register</span> for <span style="font-style:lighter;color:#fce000;">mkk</span><span style="color:#fce000; font-weight:bold;"> 56565464646 </span><span style="font-weight:normal; text-decoration:underline;">click here</span></strong></a>
      </center></td>
  </tr>
  <tr>
    <td bgcolor="#fce000" style="padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:15px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><a href="http://www.fgdfgdg"" target="_blank" style="font-family:Myriad Pro, Verdana, Georgia; font-size:30px; line-height: 30px; font-style:normal; color:#ffffff; text-decoration:none;">
      <center>
        <span style="font-style:lighter;color:#0054a4;">lll</span><span style="color:#0054a4; font-weight:bold;"> ffgfgf </span><span style="font-weight:normal; color:#000000; text-decoration:none;">is proudly sponsored by</span></strong>
      </center>
      </a></td>
  </tr>
  <tr>
    <td bgcolor="#0054a4" style="padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><a href="http://www.gdfgdfgdf" target="_blank"><img name="fgdgfg" src="http://fgfdgdgdg" width="575" height="76" style="font-size:20px; color:#fce000;" alt="fgfdgdfgdfg" border="0"/></a></td>
  </tr>
</table>
<table bgcolor="#0055a5" align="center" width="575" border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td align="left" bgcolor="#0055a5" valign="top"><img src="http://www.fdgfdgdfgdfgdf.png" height="50" width="50" alt="gggggg" align="top" border="no" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" /></td>
    <td align="right" bgcolor="#0055a5" valign="top" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:30px;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;color:#fce000;" ><span style="font-weight:bold;color:##fce000;" >gfrtryrtytryrtyrty</span><br />
      rtrtrtrtertretertetertertertertertertertetert <font style="text-decoration:none;">tertetertetetet</font> <a href=mailto:fgdfgdfgdgdfgfdstyle="color:#fce000; text-decoration:none;" >rtdfgdfgdfgdfg</a> / <a href="http://www.fgdfgdfgdgdgdf" target="_blank" style="color:#fce000;text-decoration:none;">www.fgfgdfgfgd/expo</a><br />
      <strong> To unsubscribe from this newsletter </strong><a href="http://$UNSUB$" style="color:#fce000; font-weight: bold; text-decoration: underline" >click here</a></td>
  </tr>
</table>

Answer 2

以下是有关Outlook 2007、2010和2013中的古怪内容显示HTML电子邮件的有用列表： http : //www.emailonacid.com/blog/details/C13/tips_and_tricks_outlook_07-13#outlook07-13_tip16

该页面包含此技巧，该技巧与您对表进行编码的方式相符：

避免在TABLE标记中使用“ margin”或“ padding” CSS属性。 Cellpadding和Cellspacing属性通常是安全的，但边距或填充通常会添加到表中的每个TD。

希望这有助于深入了解它。