我正在开展一项电子邮件事件，但发现自己遇到了一个仅针对 Outlook 2007/10 的问题。我认为这是因为它使用了 Word 渲染引擎。此代码适用于使用 Litmus 测试的绝大多数其他客户端。
表格的总宽度为650px，每行包含3张图片，总宽度为650px。
Image2 http://www.hallwaystudios.com/screenshots/uploads/uMaf2YsD.png
这是 Outlook 2010，请注意突出显示的图像与右侧图像之间有一个小间隙。这张图片在它自己的表格单元格中，我已经对其应用了 display: block CSS。
我的整个代码库可以在下面找到。此电子邮件正在事件监视器中发送。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>We've Moooved...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
HTML,BODY {
margin: 0;
padding: 0;
}
IMG {
display: block;
padding: 0;
margin: 0;
vertical-align:bottom;
}
TABLE,TR,TD {
border-collapse: collapse;
}
P {
margin: 5px 0px;
}
</style>
</head>
<body bgcolor="#ffffff">
<table width="100%" cellpadding="0" cellspacing="0" align="center" background="images/background.jpg" bgcolor="#282828" style="padding-bottom: 20px; background-color:#282828; width: 100%">
<tr>
<td style="color: #FFFFFF; text-align: center; padding: 10px;" align="center">
<font color="#FFFFFF" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2" style="font-size: 12px; line-height: 20px;">
Having trouble viewing this email? <webversion style="color:#FFFFFF">Click here to view it in your browser</webversion>
</font>
</td>
</tr>
<tr><td>
<table border="0" cellpadding="0" cellspacing="0" width="650" align="center" style="margin: 0 auto; text-align: center; background-color: #000" bgcolor="#000">
<tr>
<td><img src="images/spacer.gif" width="26" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="3" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="84" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="41" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="75" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="9" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="40" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="83" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="42" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="13" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="53" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="18" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="40" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="6" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="68" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="19" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="29" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3" colspan="10"><a href="http://www.hallwaystudios.com/"><span></span><img name="campaign_r1_c1" src="images/campaign_r1_c1.png" width="416" height="110" border="0" alt="" style="display: block" /></a></td>
<td colspan="8" bgcolor="#000000"><span></span><img src="images/spacer.gif" width="1" height="39" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="8"><span></span><img name="campaign_r2_c11" src="images/campaign_r2_c11.jpg" width="234" height="34" border="0" alt="" style="display: block" /></td>
<td><span></span><img src="images/spacer.gif" width="1" height="34" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="8"><span></span><img name="campaign_r3_c11" src="images/campaign_r3_c11.jpg" width="234" height="37" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="18"><span></span><img name="campaign_r4_c1" src="images/campaign_r4_c1.jpg" width="650" height="157" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td rowspan="3" align="right" width="26"><span></span><img name="campaign_r5_c1" src="images/campaign_r5_c1.jpg" width="26" height="408" border="0" alt="" style="display: block" /></td>
<td rowspan="3" colspan="10" valign="top" background="images/campaign_r5_c2.jpg" bgcolor="CEF2EE" align="left" style="background:#CEF2EE url(images/campaign_r5_c2.jpg) top left no-repeat" height="408" width="443">
<!--[if gte mso 9]>
<v:rect style="width:443px;height:408px;" strokecolor="none">
<v:fill type="tile" color="#CEF2EE" src="http://www.hallwaystudios.com/images/email/campaign_r5_c2.jpg" /></v:fill>
</v:rect>
<v:shape id="theText" style="position:absolute;width:443px;height:408px;">
<![endif]-->
<font color="#000000" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2" style="font-size: 14px; line-height: 20px; text-align: left;"><multiline><p style="margin: 0px 0px 6px">Thanks to all of your support, our team has thrived and grown<br>We looked far and wide to find a space, that we can call our own</p> <p style="margin:6px 0px">We love our new office; it’s so easy to reach<br>It’s down the road in Watford (sadly not the beach)<br>Near the station, M1 and M25, we’re very well connected<br>Of course we miss the countryside, but nothing else has been affected</p><p style="margin:6px 0px">We still do great <a href="http://www.hallwaystudios.com/services/" style="color: #000000"><strong><font color="#000000">design</font></strong></a>, be it web, literature, brand or logo,<br>And know how to <a href="http://www.hallwaystudios.com/services/" style="color:#c92234"><font color="#c92234"><strong>promote</strong></font></a> your business through social media, email and SEO.<br>We <a href="http://www.hallwaystudios.com/services/" style="color:#1f75b0"><font color="#1f75b0"><strong>develop</strong></font></a> the technology: e-commerce, web or bespoke software<br>And we make sure you’re involved at every stage to create results beyond compare.</p><p style="margin:6px 0px">So make sure you come and visit, for a coffee and some cake<br>We'd be delighted to show you round, and love an excuse to bake!</p><p style="margin: 6px 0px 0px">To get your free cake and coffee, call us or click on the button to the right<br>And arrange to see us and Betty the cow, (she heard we had moo-ved and appeared one night...)</p></multiline></font>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
<td colspan="7" align="left"><img name="campaign_r5_c12" src="images/campaign_r5_c12.jpg" width="181" height="163" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="3" align="left"><img name="campaign_r6_c12" src="images/campaign_r6_c12.jpg" width="64" height="51" border="0" alt=""></td>
<td align="left"><a href="http://www.hallwaystudios.com/contact/"><img name="campaign_r6_c15" src="images/campaign_r6_c15.jpg" width="68" height="51" border="0" alt="" style="display: block" /></a></td>
<td colspan="3" align="left"><img name="campaign_r6_c16" src="images/campaign_r6_c16.jpg" width="49" height="51" border="0" alt="" style="display: block" /></td>
<tr>
<td colspan="7" align="left"><img name="campaign_r7_c12" src="images/campaign_r7_c12.jpg" width="181" height="194" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18"><img name="campaign_r8_c1" src="images/campaign_r8_c1.jpg" width="650" height="98" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18"><span></span><img name="campaign_r9_c1" src="images/campaign_r9_c1.jpg" width="650" height="178" border="0" alt="" style="display: block" /></td>
</tr>
<tr width="650">
<td align="right"><img name="campaign_r10_c1" src="images/campaign_r10_c1.jpg" width="26" height="96" border="0" alt="" style="display: block" /><span></span></td>
<td colspan="4" align="right"><a href="http://www.hallwaystudios.com/contact/#map"><span></span><img name="campaign_r10_c2" src="images/campaign_r10_c2.jpg" width="203" height="96" border="0" alt="" style="display: block" /></a></td>
<td colspan="13" align="left"><span></span><img name="campaign_r10_c6" src="images/campaign_r10_c6.jpg" width="421" height="96" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18"><span></span><img name="campaign_r11_c1" src="images/campaign_r11_c1.jpg" width="650" height="145" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18" bgcolor="#000000"><img src="images/social_footer.jpg" usemap="#Map" border="0" /></td>
</tr>
<tr>
<td colspan="18" bgcolor="#000000" align="center">
<font color="#FFFFFF" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2">
Censored</font></p>
<p><small>
Would you like to <preferences style="color:#FFFFFF">
<font color="#FFFFFF">update your details</font></preferences>? Or <unsubscribe style="color:#FFFFFF"><font color="#FFFFFF">unsubscribe from our awesome email list</font></unsubscribe> (Betty will miss you)?
</small></p>
</font>
</td>
</tr>
</table>
</td></tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="31,2,112,67" href="http://www.facebook.com/hallwaystudios" target="_blank" alt="Facebook" />
<area shape="rect" coords="279,1,362,70" href="http://www.linkedin.com/company/hallway-studios-limited" target="_blank" alt="LinkedIn" />
<area shape="rect" coords="404,2,486,81" href="http://www.hallwaystudios.com/" target="_blank" alt="Hallway Studios" />
<area shape="rect" coords="526,-9,622,77" href="[forwardtoafriend]" />
<area shape="rect" coords="155,-2,237,67" href="http://twitter.com/hallwaystudios" target="_blank" alt="Twitter" />
</map>
</body>
</html>
如有任何想法，我们将不胜感激!
最佳答案
我想我终于解决了这个困扰了我几天的问题。它可能不适用于你，我不能很好地阅读代码，但对我来说问题是我有我将要调用的偏移列。如果您的表格列排列得很好，Outlook 会很好地处理它们，如下图所示:
如果您有任何偏移列，它就会开始出现问题，并且您最终会在没有意义的地方出现那些幻象空间。这是一个糟糕的方法:
据我所知，您最好创建比实际需要更多的列，因为如果您以合乎逻辑、经济的方式节约和创建表，就会遇到问题。这解决了我的问题，希望它能解决您的问题。
关于HTML 电子邮件显示不正确 Outlook 2007/10，图像之间有额外的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11136744/