Question

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

<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

Answer 1

很奇怪，我只是通过石蕊运行你的html，它在chrome中的外观和它在outlook上的效果相同...... 13 ...

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

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

Litmus Test

Outlook 2013 html电子邮件向右边添加保证金＆amp;背景图像的底部

1 个答案: