正文背景颜色不适用于电子邮件通讯答案

【问题标题】：Body background color not working for email newsletter正文背景颜色不适用于电子邮件通讯
【发布时间】：2014-07-02 06:39:57
【问题描述】：

我正在编写电子邮件通讯。除了主体背景颜色或 100% 的主体宽度不工作外，其他一切都已到位并且工作正常。

知道我在这里做错了什么，或者我怎样才能让它发挥作用？

我的时事通讯的网址： https://dl.dropboxusercontent.com/u/29654441/Accessibility/New%20folder/newsletter_issue1/newsletter_inline.html

【问题讨论】：

标签： html css newsletter

【解决方案1】：

大多数邮件客户端都会忽略正文元素。如果您需要背景，则必须制作一个容器元素并为其添加背景。

【讨论】：

【解决方案2】：

理想情况下，正文宽度应为 640，因为大多数手机和平板电脑都会正确调整电子邮件的大小。

【讨论】：

不，body 应该始终为 100%，然后您应该使用 <td> 标签定义容器宽度

【解决方案3】：

每个电子邮件客户端处理事情的方式都不同，所以有些会去掉正文，有些则不会。

我会对您的代码进行一些更改。首先，使用代替 .尽管 div 确实适用于大多数客户端，但您将拥有更好的表格灵活性，因为它们将根据正在查看的大小调整大小。将所有内容包装在一个单元格表中，并将背景颜色应用于该元素。

最后你需要在手机上做一些测试，因为它们的宽度平均只有 460 像素，你的最大宽度应该是 760 像素，而不是 860 像素。例如，您的邮件目前不会显示在纵向 iPad 上。

http://putsmail.com/ 对测试非常有用。

【讨论】：

【解决方案4】：

试试这个：

<body bgcolor="#efefef" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
              <td width="650" valign="top" align="center" bgcolor="#efefef">
                  ....
              </td>
        </tr>
    </table>
</body>

标签现在是电子邮件模板的容器包装器。由于一些电子邮件客户端剥离了正文标签，因此您有一个 100% 的表格可供所有客户端支持。

我还建议在您的 <head> 标签中使用以下内容：

<style type="text/css">
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
    .ExternalClass {width:100%;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
</style>

这只是一些额外的功能：

防止 Webkit 和 Windows Mobile 平台更改默认字体大小，同时不破坏桌面设计。
强制 Hotmail 以全宽显示电子邮件。
强制 Hotmail 显示正常行距。

【讨论】：

【解决方案5】：

正文元素并不总是被忽略（尤其是在 Outlook 中），但是您也应该将它与全宽表格配对作为后备。这也是让转发背景颜色保持白色，而您的 html 区域背景保持其他颜色的好方法。

这是一个考虑到这一点的基本设置：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    /* Client-specific Styles */
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}
  </style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#FFFFFF" style="padding:30px;">
      Content here
    </td>
  </tr>
</table>

</td></tr></table></td></tr></table></body></html>

附带说明，如果您想要背景图像，html 电子邮件中有 2 种方法。 See this answer 了解更多详情。

【讨论】：