Question

我正在构建一个电子邮件，我需要一个图像（一个号召性用语按钮）在另一个的顶部，他跟随代码它只在少数客户端工作：

<tr>
    <td align="center" width="660" height="457" valign="top"><img width="660" height="457" style="display:block; vertical-align:top; margin:0; padding:0; outline:none; border:none;" src="image_1.jpg" />
    <a href="http://www.facebook.com/LurpakButter/app_299490026832067"><img width="341" height="56" style="display:block; vertical-align:top; margin-top:-300px; padding:0; outline:none; border:none;" src="cta.png" /></a></td>
</tr>

有更好的方法吗？

Answer 1

在Gmail中，使用padding而不是margin作为间距，就像Diodeus提到的campaignmonitor是一个很好的资源

Answer 2

看起来你正试图解决这样一个事实，即电子邮件不支持表格中的背景图像（无论如何都要支持客户端）。使用margin-top:-300;聪明的想法，但似乎没有按预期工作。（全面支持css保证金）。

我知道获得所需布局的唯一方法是将背景图像切割成更小的块：

<table width="660" border="0" cellpadding="0" cellspacing="0">
  <tr>    
    <td width="660" colspan="3">
      <img width="660" height="100" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
    </td>
  </tr>
  <tr>    
    <td width="60">
      <img width="60" height="50" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
    </td>
    <td width="300">        
      <a href="http://www.facebook.com/LurpakButter/app_299490026832067"><img width="300" height="50" style="margin: 0; border: 0; padding: 0; display: block;" src="cta.png" /></a>
    </td>
    <td width="300">
      <img width="300" height="50" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
    </td>
  </tr>
  <tr>    
    <td align="center" width="660" colspan="3">
      <img width="660" height="100" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
    </td>
  </tr>
</table>

或者你可以制作一个大图像并进行图像映射，但这可能不是行动号召的最佳做法。

Answer 3

定位和许多其他可能导致内容在许多邮件客户端上跳出或泄漏客户区的CSS功能受到限制。因此，许多邮件客户端无法将定位元素放在彼此之上。

对于基于Web的客户端，其中大部分内容都是为了防止电子邮件欺骗客户端功能。对于MS-Outlook来说，使用那些糟糕的MS-WORD渲染引擎就是一个问题。

这是可以使用的好指南。

http://www.campaignmonitor.com/css/

Gmail css保证金无效

3 个答案: