Outlook 中的 HTML 电子邮件模板背景颜色问题

Question

我的 HTML 电子邮件模板背景颜色在 Outlook 中无法正确呈现。

我使用了不同的技术，但仍然不起作用。

我已将整个部分包装到表格中，并将背景颜色应用于

#ececec

并将颜色应用于内部

td

背景 #ffffff 但整个外部表格背景颜色仍然是

#ffffff

我希望外部表格背景颜色为

#ececec

如图

Gmail view

所示。

Gmail 视图：

Outlook 桌面视图：

如何使其看起来与 Gmail 中的一样？

这是我的代码

<table bgcolor="#ececec" align="center" border="0" cellspacing="0" cellpadding="0" style="width:100%; border-collapse: collapse;">
  <tr>
      <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
        <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
              <tr>
                  <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px; ">
                      <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-number1.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                  </td>
                  <td bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                      <div style="vertical-align: middle; display: inline-block;">
                          <h3 style="margin: 0; padding: 0;">Australia's No. 1</h3>
                          <span>Replica lighting store</span>
                      </div>
                  </td>
              </tr>
          </table>              
      </td>
      <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
        <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
              <tr>
                <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px;  ">
                      <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-huge-range.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                  </td>
                  <td  bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px; ">
                      <div style="vertical-align: middle; display: inline-block; ">
                          <h3 style="margin:0; padding:0;">Huge range</h3>
                          <span>20,000+ products</span>
                      </div>
                  </td>
              </tr>
          </table>
      </td>
  </tr>
  <tr>
    <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
        <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
              <tr>
                <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px;">
                      <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-fast-shipping.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                  </td>
                  <td bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                      <div style="vertical-align: middle; display: inline-block;  ">
                          <h3 style="margin:0; padding:0;">Fast shipping</h3>
                          <span>24hr dispatch on most items</span>
                      </div>
                  </td>
              </tr>
          </table>
      </td>
      <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
            <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
              <tr>
                <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px; ">
                      <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-30-days.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                  </td>
                  <td bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                      <div style="vertical-align: middle; display: inline-block; ">
                          <h3 style="margin:0; padding:0;">30 days returns</h3>
                          <span>For peace of mind</span>
                      </div>
                  </td>
              </tr>
          </table>
      </td>
  </tr>
</table>

Answer 1

我建议查看这篇有关 Outlook CSS 怪癖的文章：A Guide to Rendering Differences in Microsoft Outlook Clients。它讨论了使用 VML 作为解决方法。

问题：

<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" style="width:100%; border-collapse: collapse;">
<tr>
<td style="background-color:#ececec;">
<![endif]-->
<table bgcolor="#ececec" align="center" border="0" cellspacing="0" cellpadding="0" style="width:100%; border-collapse: collapse;">
       <tr>
    <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
      <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
            <tr>
                <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px; ">
                    <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-number1.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                </td>
                <td bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                    <div style="vertical-align: middle; display: inline-block;">
                        <h3 style="margin: 0; padding: 0;">Australia's No. 1</h3>
                        <span>Replica lighting store</span>
                    </div>
                </td>
            </tr>
        </table>              
    </td>
    <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
      <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
            <tr>
              <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px;  ">
                    <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-huge-range.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                </td>
                <td  bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px; ">
                    <div style="vertical-align: middle; display: inline-block; ">
                        <h3 style="margin:0; padding:0;">Huge range</h3>
                        <span>20,000+ products</span>
                    </div>
                </td>
            </tr>
        </table>
    </td>
</tr>
<tr>
  <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
      <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
            <tr>
              <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px;">
                    <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-fast-shipping.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                </td>
                <td bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                    <div style="vertical-align: middle; display: inline-block;  ">
                        <h3 style="margin:0; padding:0;">Fast shipping</h3>
                        <span>24hr dispatch on most items</span>
                    </div>
                </td>
            </tr>
        </table>
    </td>
    <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
          <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
            <tr>
              <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px; ">
                    <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-30-days.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                </td>
                <td bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                    <div style="vertical-align: middle; display: inline-block; ">
                        <h3 style="margin:0; padding:0;">30 days returns</h3>
                        <span>For peace of mind</span>
                    </div>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->