背景最大宽度+背景渐变,适用于基于web的邮件客户端.(outlook和gmail)



因此,我的任务是制作一份关于为癌症筹集资金的时事通讯。我很自然地接受了,但我遇到了基于网络的电子邮件客户端的问题。(我试过outlook.com和gmail.com)这个基于网络的客户似乎不接受我的一些风格。

在"常规"电子邮件客户端中,所有内容都按预期显示。需要澄清的屏幕截图。

在基于网络的情况下,我得到了以下内容。

现在我自己在谷歌上搜索了一下,发现了一个列表,其中包含多个客户端提供的所有css支持:http://www.campaignmonitor.com/css/

我的代码如下。(我不能全部粘贴,所以我只解释最多,然后粘贴一部分)。内容存在于三个表中。页眉、正文和页脚。页眉和正文共享渐变背景,页脚有自己的渐变背景,但它来自同一代码(再次简单地称为包含样式的类)。现在我想知道是否有一种方法可以在所有的电子邮件客户端中获得我的第一个结果。如果这不可能,我将接受给出最能再现所要求结果的结果的答案。

编辑

为了让页脚的背景向上延伸到正文下方,我使用了负边距。既然这不是最好和安全的编码方式,这会导致其中一个问题吗?

总结一下不同之处:

  • 在页脚和正文之间留出很大的空间。(可能是因为代码:

页边空白:-100;填充顶部:100px;

  • 页脚的背景渐变不显示
  • 内容中的字体样式更改(不过这可能与浏览器有关(不要将其视为问题的一部分,但如果您对此有快速解决方案,请分享)

欢迎来到html电子邮件设计的世界。我建议你查看这些资源,以帮助你跟上进度。这样,当一半的代码在测试时不起作用时,你会得到更少令人讨厌的惊喜。

在大多数客户中,CSS3不起作用,所以你可能不得不使用图像作为背景。在x中重复1px x 500px会很好。让背景在Outlook中工作的唯一方法是在body标记中(整个电子邮件背景)或使用VML,它允许您为每个元素应用背景。查看backgrounds.cm了解VML解决方案。

对于字体更改,您需要在每个<td>中声明字体,也可以使用<font><span>标记进行声明。这里有一个例子:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:30px;" bgcolor="#EEEEEE">
      This is 14px Arial in black<br>
      <font style="font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #FF5555;">20px Arial in red</font>
    </td>
  </tr>
  <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:30px;" bgcolor="#DDDDDD">
      Unfortunately I have to put my font css inline here too, otherwise some clients will default to default (in Outlook this is Times New Roman)<br>
    </td>
  </tr>
</table>

最新更新