1

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

<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>

有没有更好的方法来做到这一点？

4

3 回答 3

5

在 Gmail 中，使用padding而不是margin用于间距，并且像 Diodeus 提到的活动监视器是一个很好的资源

于 2012-11-13T16:55:11.613 回答
2

定位和许多其他 CSS 功能可能会导致内容在许多邮件客户端上的客户区跳出或泄漏出来。因此，在许多邮件客户端上，将元素放在一起是不可能的。

对于基于 Web 的客户端，这大部分是为了防止电子邮件欺骗客户端功能。对于 MS-Outlook，它使用了非常糟糕的 MS-WORD 渲染引擎。

这是一个很好的指南，你可以使用什么。

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

于 2012-11-13T15:56:55.360 回答
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>

或者，您可以只制作一张大图像并进行图像映射，但这可能不是号召性用语的最佳做法。

于 2012-11-13T16:50:01.833 回答