某些背景颜色未加载 Outlook 2016

Question

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

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>

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

Answer 2

Outlook 并不真正适用于 <div>。您可以使用它，但当它没有按预期工作时，请不要感到惊讶。

Outlook 无法按照您使用的方式处理背景图像。 @caiovisk 有一个我建议你学习的例子。

至于背景颜色，请尝试使用：background: #ff0000; 而不是 background-color: #ff0000;。 `bgcolor="#ff0000" 应该总是在表格上工作。这也将解决 Android.

的问题

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

我的建议是停止开发您追求电子邮件的方式。找到一个体面的响应式电子邮件模板，并以此为例。你前进的方向问题太多，我看你是自找麻烦

祝你好运。

某些背景颜色未加载 Outlook 2016

Some background colors not loading for Outlook 2016

html

css

email

html-email