3

我正在开发一个电子邮件活动,但发现自己遇到了一个特定于 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>

任何想法,将不胜感激!

4

2 回答 2

3

我想我终于解决了困扰我几天的这个问题。它可能不适用于你,我不能很好地阅读代码,但对我来说问题是我有我要称之为偏移列的东西。如果您的表格列排列得很好,Outlook 会很好地处理它们,如下图所示: 在此处输入图像描述

如果您有任何偏移列,它就会开始出现问题,并且您最终会在没有意义的地方出现那些幻影空间。这是一个不好的方法: 在此处输入图像描述

据我所知,您最好创建比实际需要更多的列,因为如果您以合乎逻辑、经济的方式节约和创建表,您就会遇到问题。这解决了我的问题,希望能解决你的问题。

于 2012-06-25T20:19:55.443 回答
0

我永远不会使用 col 或 rowspan,我只是遇到了麻烦。并且 android 或 gmail 不支持 FYI 样式,因此您需要将其全部设为内联 css 样式

于 2012-07-02T10:57:02.737 回答