html - 适用于基于 Web 的邮件客户端的背景最大宽度 + 背景渐变。 (展望和 Gmail)

Question

所以我的任务是创建一份关于为癌症筹集资金的时事通讯。我自然而然地接受了，但我遇到了基于网络的电子邮件客户端的问题。 (我试过 outlook.com 和 gmail.com)基于网络的客户端似乎不接受我的一些样式。

在“常规”电子邮件客户端中，一切都按预期显示。 Screenshot to clarify.

在网络上我得到 the following .

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

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

编辑

为了让页脚的背景向上延伸到正文下方，我使用了负边距。由于这不是最好和安全的编码方式，这会导致问题之一吗？

总结一下不同之处:

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

margin-top:-100; padding-top:100px;

• 不显示页脚的背景渐变。
• 内容中的字体样式更改(虽然这可能与浏览器相关(不要将此视为问题的一部分，但如果您对此有快速修复，请分享))。

Answer 1

欢迎来到 html 电子邮件设计的世界。我建议你查看these resources帮助您快速上手。这样，当您的一半代码在测试时不起作用时，您就不会那么讨厌了。

在大多数客户端中，CSS3 不起作用，因此您可能必须使用图片作为背景。在 x 中重复 1px x 500px 可以正常工作。让背景在 Outlook 中工作的唯一方法是在正文标记(整个电子邮件背景)中或使用 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>