Outlook 2013 html 电子邮件在背景图像的右侧和底部添加边距答案

【问题标题】：Outlook 2013 html email adding margin to right & bottom of background imageOutlook 2013 html 电子邮件在背景图像的右侧和底部添加边距
【发布时间】：2014-03-19 22:30:55
【问题描述】：

我无法弄清楚为什么它会在背景图像的侧面和底部添加边距并因此裁剪图像。非常感谢任何帮助。

<table align="center" width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td background="http://s10.postimg.org/rcw5jrw3d/header.jpg" bgcolor="#230f0e" width="600" height="400" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
    <v:fill type="tile" src="http://s10.postimg.org/rcw5jrw3d/header.jpg" color="#230f0e" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td mc:edit="title" style="color:white; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:32px; padding-left:12px; padding-top:8px">Samson Bar &amp; Cafe</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
  <td mc:edit="price" align="right" style="color:#fb0000; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:27px; padding-right:12px; padding-top:198px">Only 999$, limited offer!</td>

  </tr>
</table>
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
  </tr>
  <tr>
    <td mc:hideable align="center" bgcolor="#230f0e" style="text-align:center; background-color:#230f0e; padding:13px"><img mc:edit="image-area" src="http://placehold.it/550x350"></td>
  </tr>
  <tr>
    <td mc:edit="text-area" mc:hideable="" bgcolor="#000000" style="color:white; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:12px;;background-color:#000000; padding:13px">Lorem Ipsum is a nice simplydummy text ot the printing and the a typesetting industry. Lorem 
Ipsum is a nice simplydummy text ot the printing and the a typesetting industry. Lorem Ipsum 
is a nice simplydummy text ot the printing and the a typesetting industry. Lorem Ipsum is a nic 
simplydummy text ot the printing and the a typesetting industry. Lorem Ipsum is a nice simply
dummy text ot the printing and the a typesetting industry.Lorem Ipsum is a nice simplydummy
text ot the printing and the a typesetting industry.Lorem Ipsum is a nice simplydummy text ot  
the printing and the a typesetting industry. Lorem Ipsum is a nice simplydummy text ot the pri
ing and the a typesetting industry. Lorem Ipsum is a nice simplydummy text ot the printing an 
the a typesetting industry. Lorem aIpsum is a nice simplydummy text ot the printing and the a 
typesetting industry. Lorem Ipsum ais a nice simplydummy text ot the printing and the a types
tting industry. Lorem Ipsum is a nica simplydummy text ot the printing and the a typesetting in
ustry. Lorem Ipsum is a nice simplyadummy text ot the printing and the a typesetting industry.
Lorem Ipsum is a nice simplydummya text ot the printing and the a typesetting industry.Lorem 
Ipsum is a nice simplydummy text ot  a the printing and the a typesetting industry. </td>
  </tr>
  <tr>
    <td background="http://s10.postimg.org/4zoewyv5l/footer.jpg" bgcolor="#682204" width="600" height="150" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:150px;">
    <v:fill type="tile" src="http://s10.postimg.org/4zoewyv5l/footer.jpg" color="#682204" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="2" style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:14px; color:white; padding-left:15px; padding-top:10px">Copyright © 2014. Samson Bar &amp; Cafe.<br>
      All rights reserved.</td>
    <td align="center" style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:14px; color:white; padding-top:10px">Follow Us on</td>
  </tr>
  <tr>
    <td align="center" rowspan="3"><a href="#"><img src="http://s15.postimg.org/gz5h8efzb/facebook.png" width="41" height="40" alt="Facebook"></a>&nbsp;<a href="#"><img src="http://s15.postimg.org/vwj06izjb/linkedin.png" width="41" height="41" alt="LinkedIn"></a>&nbsp;<a href="#"><img src="http://s15.postimg.org/h0ff1tht3/twitter.png" width="41" height="40" alt="Twitter"></a></td>
  </tr>
  <tr>
    <td style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:14px; color:white; padding-left:15px; padding-top:15px">Our mailing address: <a href="#">xxxxx@xxxxx.com</a></td>
    </tr>
  <tr>
    <td></td>
    </tr>
  <tr>
    <td align="center" colspan="2" style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:14px; color:white; padding-left:15px; padding-top:15px"><a href="*|UNSUB|*">Unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">Update subscription preferences</a></td>
    </tr>
</table>
</div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
  </tr>
</table>
    </td>
  </tr>
</table>

这似乎只在查看 Outlook 2013 电子邮件摘要时发生，而不是作为新窗口打开电子邮件。

这是一张显示正在发生的事情的图片 - problem

【问题讨论】：

标签： html email outlook html-email email-client

【解决方案1】：

很奇怪，我刚刚通过石蕊运行了您的 html，它在 chrome 中看起来与在 Outlook '13 上的外观相同......

尝试将fill type="tile" 更改为"frame"？

除此之外，我最好的猜测是 mailchimp 对您的 mc:xxx 句柄进行了一些预处理。您可能想就此与他们联系。

Litmus Test

【讨论】：