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"无法正常工作。尝试为Outlook尝试`width =“ 902”。我不明白为什么您指定的宽度比Outlook视口中显示的宽度宽322像素。考虑使用较窄的电子邮件。

我的建议是停止开发您追求电子邮件的方式。找到一个不错的响应式电子邮件模板，并以它为例。您所要走的路有很多问题，我可以看到您只是在自找麻烦。

祝你好运。

Outlook 2016无法加载某些背景色

2 个答案: