Outlook 2016 未加载某些背景颜色答案

【问题标题】：Some background colors not loading for Outlook 2016Outlook 2016 未加载某些背景颜色
【发布时间】：2018-07-11 21:32:43
【问题描述】：

一直在尝试关注这篇关于制作面向未来的响应式电子邮件模板的文章：

https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

我正在处理的内容在大多数客户端中看起来不错，但 Outlook 没有呈现某些背景颜色。

应该看起来像这样带有灰色边框（这是在 Gmail 中）：

不过，Outlook 2016 如下所示：

现在我只是想让灰色边框显示出来。会弄清楚为什么背景图片不是稍后。

无论如何，这就是我目前所拥有的。关于如何让这个灰色背景像在 Gmail 中一样显示整个电子邮件正文宽度的任何建议？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <!--[if (gte mso 9)|(IE)]>
    <style type="text/css">
        table {border-collapse: collapse;}
    </style>
    <![endif]-->
    <style type='text/css'>
        /* Basics */
        body {
            margin: 0 !important;
            padding: 0;
            background-color: #ffffff;
            font-family: Arial, Helvetica, sans-serif;
        }

        table {
            border-spacing: 0;
            font-family: sans-serif;
            color: #333333;
        }

        img {
            border: 0;
        }

        div[style*="margin: 16px 0"] { 
            margin:0 !important;
        }

        .content {
            width: 100%;
            table-layout: fixed;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            background-color: #7E8083;
        }

        .webkit {
            max-width: 902px;
            margin: 0 auto;
        }

        .outer {
            margin: 0 auto;
            width: 95%;
            max-width: 902px;
            background-color: #1D428A;
            color: #FFF;
        }

        .content-area {
            background-position: center;
            background-size: 100% 100%;
        }

        .footer {
            font-size: 10px;
            -webkit-text-size-adjust: 95%;
        }
    </style>

</head>

<body>
    <div class="header" align="center">
        <table cellpadding="20">
            <tr>
                <td>
                    <img src="https://marketing-image-production.s3.amazonaws.com/uploads/a.gif" width="150" alt="The Company Logo">
                </td>
            </tr>
        </table>
    </div>

    <div bgcolor="#7E8083" class="content">
        <div class="webkit">
            <!--[if (gte mso 9)|(IE)]>
            <table width="902px" align="center">
            <tr>
            <td>
            <![endif]-->
            <table height="381" class="outer" align="center">
                <tr align="center">
                    <td background="https://marketing-image-production.s3.amazonaws.com/uploads/8.gif" align="center" class="content-area">
                        [content here]
                    </td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
    </div>

    <div class="footer" align="center" size="10">
        <p>If you would like to unsubscribe and stop receiving these emails
        <a href="[unsubscribe]">click here</a>. We encourage you not to do so to ensure you receive important emails related to your account.</p>
    </div>
</body>

</html>

【问题讨论】：

标签： html css email html-email

【解决方案1】：

你可以试试防弹背景图片：

<td background="https://marketing-image-production.s3.amazonaws.com/uploads/a.gif" bgcolor="#1D428A" width="120" height="92" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
    <v:fill type="tile" src="https://marketing-image-production.s3.amazonaws.com/uploads/a.gif" color="#1D428A" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
    [content here]
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

见：https://backgrounds.cm/

我们通常会被问到一些事情，遗憾的是在 Outlook 中是不可能的，因此......不幸的是，Outlook 在其 CSS 支持方面有很多限制。

可以在此处找到对大多数电子邮件客户端的 CSS 支持的良好指南：https://www.campaignmonitor.com/css/

【讨论】：

【解决方案2】：

Outlook 不适用于 <div>。你可以使用它，但当它不能按预期工作时不要感到惊讶。

Outlook 无法以您使用它们的方式处理背景图像。 @caiovisk 有一个例子，我建议你继续学习。

就背景颜色而言，请尝试使用：background: #ff0000; 而不是 background-color: #ff0000;。 `bgcolor="#ff0000" 应该始终在表格上工作。这也将解决您的 Android 问题。

width="902px" 不会工作。改用 Outlook 的 `width="902"。我不明白为什么您指定的宽度比 Outlook 视口中显示的宽度宽 322 像素。考虑使用更窄的电子邮件。

我的建议是停止开发您处理电子邮件的方式。找到一个体面的响应式电子邮件模板，并以它为例。你前进的方向有很多问题，我看你只是在自找麻烦。

祝你好运。

【讨论】：